右边的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)
            }
        }

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