react-native - 右侧的 React Native 导航标题按钮无法正常工作

Question

我正在使用 React Native 开发一个移动应用程序。我正在使用 React 导航，https: //reactnavigation.org/进行导航。但是我在将按钮嵌入操作栏或工具栏或导航栏或任何您想要调用的内容时遇到问题。但它不起作用。

class HomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
    return {
        headerTitle: "This is the title",
        headerRight: (
                <Button
                onPress={() => {

                }}
                title="+1"
                color="#fff"
                />
            ),
        };
    };

    constructor(props) {
        super(props)
        this.state = {
            active: 'true'
        };
    }

    render() {
        return (
            <Container>
                <View style={{ flex: 1 }}>
                    <Content padder>
                    <Tabs>
                    <Tab heading="Shuffles">
                        <Playlists />
                    </Tab>
                    <Tab heading="Public">
                        <Playlists />
                    </Tab>
                    <Tab heading="My Playlists">
                        <Playlists />
                    </Tab>
                    </Tabs>
                    </Content>
                </View>
            </Container>
        )
    }
}

export default HomeScreen;

正如您在我的代码中看到的那样，我正在更改标题并像这样在右侧添加按钮。

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: "This is the title",
            headerRight: (
                    <Button
                    onPress={() => {

                    }}
                    title="+1"
                    color="#fff"
                    />
                ),
            };
        };

但它只是更改标题，而不是添加右侧的按钮，如下面的屏幕截图所示。

为什么右侧没有添加按钮？

Answer 1

迟到的答案，但我希望这将帮助人们在 react-navigation v4 中面临这个问题。

在您的 createBottomTabNavigator（或任何您使用的）上，添加此

import { getActiveChildNavigationOptions } from 'react-navigation';

navigationOptions: ({ navigation }) => {
        const { index, routes } = navigation.state;
        const { routeName } = routes[index];

        if (routeName === '<Route name>') {
            return {
                ...getActiveChildNavigationOptions(navigation)
            }
        }

现在你应该可以从你的组件自定义导航栏了