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

发布时间：2020-12-15 09:31:41 所属栏目：百科来源：网络整理

导读：我有两个标签,我把它放在createStackNavigator中我在用 “react-navigation”：“^ 2.0.1”, ?“本土反应”：“0.55.3”, const Cstack = createStackNavigator({ cstack: { screen: Screen1,}},{ headerMode:'none'});const Dstack = createStackNavigator

我有两个标签,我把它放在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,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})

希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!