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

Question

我有两个标签，我把它放在createStackNavigator里面

我在用

“react-navigation”：“^ 2.0.1”，“react-native”：“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'
      })
});

我的问题是他们都共享相同的标题欢迎我如何动态更改标题当我切换到其他选项卡示例我将切换tabsettings然后我的标题将是设置。

Answer 1

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

我为屏幕添加了一个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})

希望这可以帮助。

Answer 2

您可以使用navigationOptions在每个屏幕中手动设置标题标题。例：

class TabSettingsScreen extends React.Component {

  static navigationOptions = ({navigation}) => ({
    title: 'Settings'
  })

  render() {
    return (... );
  }

}

Answer 3

如果您使用反应导航<2，即1.5。*您可以这样设置。

const Tabs = TabNavigator({
    Tab1:{
         screen: Tab1,
         navigationOptions: ({navigation}) => {
            return { title: "Tab 1 Heading", tabBarLabel:"Tab 1 "}
    },
    }
    Tab2:{
       screen: Tab2
       navigationOptions: ({navigation}) => {
         return { title: "Tab 2 Heading", tabBarLabel:"Tab 2 "}
    }
    }
})

const Stack = StackNavigator({
    tabs: {
      screen: Tabs
      navigationOptions: ({navigation}) => {
        return { title: "Stack"}
      }
    },
    otherScreen: Page
})

我不确定为什么他们删除了这个功能，当你尝试同样的功能时，它将不能用于最新的反应导航。现在标题对象键似乎用于后备。

这可能对某些用户有所帮助。如果您希望也可以尝试降级。

我今天为我的项目升级了React Navigation最新版本我认为这样对某人有用

const Tabs = TabNavigator({
     Tab1:{
        screen: Tab1,
        navigationOptions: ({navigation}) => {
           return { tabBarLabel:"Tab 1 "}
        }},
     Tab2:{
        screen: Tab2
        navigationOptions: ({navigation}) => {
           return { tabBarLabel:"Tab 2 "}
        }}
});
Tabs.navigationOptions = ({navigation})=>{
    const { routeName } = navigation.state.routes[navigation.state.index]; //This gives current route
    switch(routeName){
         case "Tab1":
           headerTitle="Tab 1";
           break;
         case "Tab1":
           headerTitle="Tab 1";
           break;
    }

 return {
   headerTitle: headerTitle
}
}

Answer 4

在子导航器中删除headerModer：'none'并为屏幕提供所需的标题

const Tstack = createStackNavigator({
    tabsettings: {
        screen: tabsettings,
        navigationOptions: {title : 'Settings'}
    },
});

删除mainStackNavigator中的标题

const StackTab = createStackNavigator(
   {
     stacktab: mytabnavigator
   },
   {
     navigationOptions: {
      header: null
    }
   }
);

Answer 5

使用TabNavigator

import TabNavigator from 'react-navigation'; 

分别为每个页面声明标题

 class Screen1 extends React.Component {

      static navigationOptions = ({navigation}) => ({
        title: 'Settings'
      })

    }

删除headerMode：'none'