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)
            }
        }

现在您应该能够从组件中自定义导航栏

右侧的React Native导航标题按钮未唤醒

1 个答案: