Question

我正在使用react-native进行简单的应用程序，而我正在使用react-native-router-flux。我想在嵌套屏幕中将标题组件从“聊天”更改为“用户名”。我尝试了几种方法，但不知道将标头组件代码放在何处。

TabBar的代码

<Router titleStyle={styles.navTitle} >
<Scene key="root">    
    <Scene title="Chat" initial key="root" tabBarPosition='top'  tabs tabBarStyle={{ top: 0, backgroundColor: '#ddd' }} tabBarIconContainerStyle={{ borderColor: '#000', borderWidth: 1}} initial>
        <Scene key="first" title="First" icon={TabIcon}>
            <Scene key="scarlet" component={BlueScreen} hideNavBar  initial />
        </Scene>
        <Scene key="second" title="Second" icon={TabIcon}>
            <Scene key="scarlet2" component={GrayScreen} hideNavBar  initial />
        </Scene>
        <Scene key="third" title="Third" icon={TabIcon}>
            <Scene key="scarlet3" component={ScarletScreen} hideNavBar  initial />
            <Scene key="root" component={SecondScene} hideNavBar title="Username"  />
        </Scene>
    </Scene>
</Scene>

当我进入SecondScene时，我希望将标题从“聊天”更改为“用户名”

Answer 1

您可以随时更改导航标题。供您使用，当您获得用户名时，只需运行以下代码。

this.props.navigation.setParams({
    title: "YOUR_USER_NAME",
});

如果导航到当前场景时获得用户名，最好在componentWillMount中更改标题。

componentWillMount() {
   this.props.navigation.setParams({
        title: "YOUR_USER_NAME",
   });
}

Answer 2

您可以将此代码添加到切换选项卡并希望username作为标题的组件中。

Actions.refresh({ title: 'Username' })。

您可以根据您的Apps流程添加此行代码。如果您要切换到chat，则可以添加

Actions.refresh({ title: 'chat' })。

希望有帮助！

如何在react-native-router-flux

2 个答案: