Как динамически изменить заголовок навигации заголовка при переключении вкладок

Question

У меня есть 2 вкладки, и я помещаю их внутрь createStackNavigator

Я использую

«реагировать на навигацию»: «^ 2.0.1», »response-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'
      })
});

Моя проблема в том, что они оба имеют одинаковый заголовок Welcome как я могу динамически изменить заголовок при переключении на другую вкладкуНапример, я переключу tabsettings, тогда мой заголовок будет Настройки .

Answer 1

Если вы используете реагирующую навигацию <2, т. Е. ~ 1,5. * Вы можете установить это такне будет работать на последней реакции-навигации.Похоже, теперь для резервного копирования используется ключ титровального объекта. </p>

Это может быть полезно некоторым пользователям.Если вы хотите, вы можете попробовать понизить также.

Я обновил навигацию React до последней версии для своего проекта. Думаю, этот способ кому-то пригодится

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 2

использовать TabNavigator

import TabNavigator from 'react-navigation'; 

объявлять заголовок для каждой страницы отдельно

 class Screen1 extends React.Component {

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

    }

удалить headerMode: 'none'

Answer 3

удалить headerModer: 'none' в дочерних навигаторах и дать необходимый заголовок для экранов

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

Удалить заголовок в mainStackNavigator

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

Answer 4

У меня была та же проблема, и я ничего не мог найти, но думаю, что, возможно, нашел решение.

Я добавил обратный вызов 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 5

Вы можете установить заголовок заголовка вручную на каждом экране, используя navigationOptions .Пример:

class TabSettingsScreen extends React.Component {

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

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

}