右侧的 React Native 导航标题按钮不起作用答案

【问题标题】：React Native navigation header button on the right is not woking右侧的 React Native 导航标题按钮不起作用
【发布时间】：2019-09-09 22:48:35
【问题描述】：

我正在使用 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"
                    />
                ),
            };
        };

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

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

【问题讨论】：

你可以试试不同的颜色吗？也许它应该与 topbar 的颜色大致相同。
我尝试将颜色设置为红色。但仍然没有显示按钮。
@WaiYanHein 我面临同样的问题。你找到解决办法了吗？

标签： react-native react-navigation react-navigation-stack

【解决方案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)
            }
        }

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

【讨论】：