当前位置 : 主页 > 网页制作 > React >

react-native – 如何在切换选项卡时动态更改标题导航标题

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有两个标签,我把它放在createStackNavigator中 我在用 “react-navigation”:“^ 2.0.1”, “本土反应”:“0.55.3”, const Cstack = createStackNavigator({ cstack: { screen: Screen1, }},{ headerMode:'none'});const D
我有两个标签,我把它放在createStackNavigator中

我在用

“react-navigation”:“^ 2.0.1”,
 “本土反应”:“0.55.3”,

const Cstack = createStackNavigator({
    cstack: {
        screen: Screen1,
    }
},{
    headerMode:'none'
});


const Dstack = createStackNavigator({
    dstack: {
        screen: Screen2,
    },
},{
    headerMode:'none'
});
const mytabnavigator= createTabNavigator({
    Tab1: {
        screen: Cstack,
        navigationOptions: ({navigation}) => ({
            headerTintColor: 'white',
            tabBarIcon: ({focused, tintColor}) => {
                return (
                    <IconIonicons
                        name='ios-cash'
                        type='ionicon'
                        color="#FFFFFF"
                        size={26}
                    />
                );
            },

        })
    },
    Tab2: {
        screen: Dstack,
        navigationOptions: ({navigation}) => ({
            headerTintColor: 'white',
            tabBarIcon: ({focused, tintColor}) => {

                return (
                    <IconIonicons
                        name='ios-card'
                        type='ionicon'
                        color="#FFFFFF"
                        size={26}
                    />
                );
            },

        })
    }
}, {
    tabBarOptions: {
        showIcon: true,
        style: {
            backgroundColor: '#3f51b5',
        },
        inactiveTintColor: '#FFFFFF',
        activeTintColor: "#FFFFFF"
    },

});




const StackTab = createStackNavigator({
     stacktab: mytabnavigator,
    navigationOptions: ({navigation}) => ({
         title: 'Welcome'
      })
});

我的问题是他们都拥有相同的头衔欢迎
当我切换到其他标签示例时,如何动态更改标题我将切换标签,然后我的标题将是设置.

我有同样的问题,我找不到任何东西,但认为我可能已经找到了解决方案.

我为屏幕添加了一个navigationOptions回调 –

const RootStack = createStackNavigator({
  HomeScreen: {
    screen: CustomHome,
    navigationOptions: ({navigation}) => {
      if(navigation && navigation.state && navigation.state.params && navigation.state.params.title) {
        return {title: navigation.state.params.title}
      }
    }
  },
  InputScreen: {
    screen: CustomInput,
    navigationOptions: ({navigation}) => {
      return {title: navigation.state.params.title}
    }
  }
})

在构造函数的组件中,我调用它来更新标题名称

props.navigation.setParams({title: props.navigation.state.params.input.name})

希望这可以帮助.

网友评论