如何使用嵌套的导航器堆栈更改标题?

时间:2018-06-28 11:09:56

标签: react-native react-navigation

标头在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屏幕上使用的相同代码根本不会更改导航头。

1 个答案:

答案 0 :(得分:1)

您可以通过以下方式为TabNavigator设置一个标题:

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