我在 StackNavigator 中的什么位置放置“tabBarOptions”？答案

【问题标题】：Where do I place "tabBarOptions" inside StackNavigator?我在 StackNavigator 中的什么位置放置“tabBarOptions”？
【发布时间】：2019-12-10 06:50:04
【问题描述】：

我正在使用 create-react-native-app 并且正在使用带有 createBottomTabNavigator 功能的 StackNavigator。图标的样式是通过一个单独的组件设置的，但我在设置导航器其余部分的样式时遇到了问题。

我已经创建了我想使用的这些选项：

  tabBarOptions: {
    showLabel: false,
    style: {
      backgroundColor: Colors.greyGreen
    }
  }

希望这对某人来说是非常明显的，并希望得到帮助！我已经尝试将选项放置在下面代码中的各个位置（两个地方都不起作用）：

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
  // TRIED PLACING THE OPTIONS HERE
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
  },
  config
);
HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};
HomeStack.path = '';

const LinksStack = createStackNavigator(
  {
    Links: LinksScreen,
  },
  config
);
LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} />
  ),
};
LinksStack.path = '';

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen,
  },
  config
);
SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} />
  ),
};
SettingsStack.path = '';

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
  // TRIED PLACING THE OPTIONS HERE
});
tabNavigator.path = '';

export default tabNavigator;

如果您想查看图标组件：

export default function TabBarIcon(props) {
  return (
    <Ionicons
      name={props.name}
      size={26}
      style={{ marginBottom: -3 }}
      color={props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
    />
  );
}

【问题讨论】：

标签： react-native react-native-tabnavigator

【解决方案1】：

我相信 React Navigation 版本 5.x 发生了变化。

const Tab = createBottomTabNavigator();

function MyTab() {
    return (
        <Tab.Navigator
            tabBarOptions={{
                showLabel: false
            }}
        >
            <Tab.Screen ... />
            <Tab.Screen ... />
        </Tab.Navigator>
    );
}

【讨论】：

【解决方案2】：

你应该把它放在这里，

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
},{

tabBarOptions: {
    showLabel: false,
    style: {
      backgroundColor: Colors.greyGreen
    }
  }
});

希望对您有所帮助。如有疑问，请随意

【讨论】：

【解决方案3】：

底部选项卡导航器：不推荐使用“tabBarOptions”。将选项迁移到“screenOptions”。

<Tab.Navigator    
  screenOptions={{
    tabBarShowLabel: false,
    tabBarStyle: {
      backgroundColor: Colors.greyGreen
    }
  }}
/>

【讨论】：