简体   繁体   中英

change parent title in react navigation?

I have a stackNavigator that include some single screen and Bottom navigation inside bottom navigation i have some other screen i want in every single screen in bottom change the parent title stack screen but it's not work i don't know why?

here's my code

App.js ~ Parent 

const AppNavigator = createStackNavigator(
 {
    Register: {
      screen: Register,
      navigationOptions: () => ({
        drawerLockMode: 'locked-closed',
      }),
    },
    TabHome: {
      screen: TabHome, // bottom navigator
    },
},
{
    initialRouteName: 'TabHome',
    title: 'Audix', this title still in every other screens 
}
);


TabNavigation.js

const TabHome = createBottomTabNavigator({
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      },
    },
 Library: {
      screen: YourLibrary,
      navigationOptions: {
        tabBarLabel: 'library',
        // title: 'library', not work here !
        // headerStyle: {
        //   backgroundColor: '#00f',
        // },
      },
    },
});

I think you can define it on every screen if you fancy this solution.

class Library extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };
  ...
}

And if you want to add default title for other screens

const AppNavigator = createStackNavigator(
 ...,
 {
   defaultNavigationOptions: {
     title: 'DEFAULT_TITLE'
   }
 }
)

I solve it, If anyone has an explanation please tell me, and why static does not work when define it in every screen in tabs

const AppNavigator = createStackNavigator(
    {
      .....
      TabHome: {
          screen: TabHome,
          navigationOptions: ({navigation}) => {
            let {routeName} = navigation.state.routes[navigation.state.index];
            let title;
            if (routeName === 'Home') {
              title = 'Home';
            } else if (routeName === 'Browse') {
              title = 'Browse';
            } else if (routeName === 'Search') {
              title = 'Search';
            } else if (routeName === 'Radio') {
              title = 'Radio';
            } else if (routeName === 'Library') {
              title = 'Library';
            }
            return {
              title,
            };
          },
    }
....
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM