切换标签时如何动态更改标题导航标题

Question

我有2个标签，并放入其中 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

如果您使用的是React Navigation <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
}
}