react-native - 如何使用嵌套的导航器堆栈更改标题？

Question

loginFlow StackNavigator 中屏幕上的标题会发生变化，但我无法更改 mainFlow 堆栈中的任何导航选项。

const AppStackNavigator = StackNavigator(
    {
        loginFlow: {
            screen: StackNavigator(
                {
                    Landing: { screen: Landing },
                    Login: { screen: Login },
                    Signup: { screen: Signup }
                },
                {
                    mode: "modal"
                    //headerMode: "screen"
                }
            )
        },
        mainFlow: {
            screen: StackNavigator(
                {
                    someTab: {
                        screen: TabNavigator({
                            Suppliers: { screen: Suppliers },
                            Shortlist: { screen: Shortlist }
                        })
                    }
                },
                {
                    //headerMode: "screen"
                }
            )
        }
    },
    {
        headerMode: "none"
    }
);

我在注册标题栏上的代码有效：

 static navigationOptions = {
        headerTitle: <Image source={require("../../../assets/img/logo-coloured.png")} />,
        headerRight: <Image source={require("../../../assets/img/signup.png")} style={{ marginRight: 15 }} />,
        headerLeft: <Image source={require("../../../assets/icons/close.png")} style={{ marginLeft: 15 }} />,
        headerStyle: { backgroundColor: "#fff", elevation: 0, borderBottomWidth: 0 }
    };

TabNavigator 屏幕上使用的相同代码根本不会更改导航标题。

标签： react-nativereact-navigation

Answer 1

您可以通过这种方式为 TabNavigator 设置一个标题：

mainFlow: {
    screen: StackNavigator(
        {
            someTab: {
                screen: TabNavigator({
                    Suppliers: { screen: Suppliers },
                    Shortlist: { screen: Shortlist }
                }),
                navigationOptions: { title: "someTab title"}
            }
        }
    )
}