Question

我有两个标签，我放在createStackNavigator

中

我正在使用

＆＃34; react-navigation＆＃34;：＆＃34; ^ 2.0.1＆＃34;， ＆＃34; react-native＆＃34;：＆＃34; 0.55.3＆＃34;，

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 在每个屏幕中手动设置标题标题。例如：

$ awk  'NR==3 && $2 > 1000{ print 22618 }' file
22618

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：“无”

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

5 个答案: