react native：设置标签导航 5 样式的方法是什么？答案

【问题标题】：react native: what is the way to style the tabs navigation 5?react native：设置标签导航 5 样式的方法是什么？
【发布时间】：2020-09-03 11:26:31
【问题描述】：

我正在使用导航 5，我想为我的标签导航器设置样式有什么办法：

1.在标签上创建一个视图？ 2. 给标签上色并给它们的背景上色？

const Tab = createMaterialTopTabNavigator();

export default function Screen8() {
  const navigation = useNavigation();
  const route = useRoute();
  const params = route.params;
  const { item } = params;
  console.log('screen 8: ', params);
  return (
    <Tab.Navigator>
      <Tab.Screen name="frog" component={NetuneyDigum} />
      <Tab.Screen name="bomb" component={BdikotSadea} />
      <Tab.Screen name="zibi" component={E_BitsuaDigdum} />
    </Tab.Navigator>
  );
}

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

In your Tab.Navigator

<Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >...</Tab.Navigator>

更多信息请参阅文档https://reactnavigation.org/docs/tab-based-navigation

【讨论】：

1 。我如何为标签的线条着色？ 2.我如何在选项卡上方添加视图？

【解决方案2】：

刚刚找到解决方案，因为文档对我不起作用。您必须将 tabBarOptions 属性添加到 Tab.Navigator 然后将您的样式放在那里。我还包括了如何添加图标以备不时之需，但如果您不需要它，只需将其删除

const Tab = createBottomTabNavigator()
const TabNavigator = () => {
    return(
        <Tab.Navigator
            tabBarOptions={{ 
                activeTintColor: '#D82A93',
                labelStyle: {
                    fontSize: 12,
                },
                style: {
                    height: 84,
                },
                tabStyle: {
                    height: 60,
                },
            }}
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
                    let type='material-community'
                    if (route.name === 'Home') {
                        iconName = 'home-outline'
                    } else if (route.name === 'Grow') {
                        iconName = 'flower-outline'
                    } else if (route.name === 'Events') {
                        iconName = 'calendar-clock'
                    } else if (route.name === 'Discussion') {
                        iconName = 'comment-discussion'
                        type = 'octicon'
                    } else {
                        iconName = 'flag-variant-outline'
                    }
                    return <Icon type={type} name={iconName} size={35} color={color}  />;
                },
            })}
        >
            <Tab.Screen name='Home' component={StackNavigator} />
            <Tab.Screen name="Grow" component={Grow} options={{headerShown: false}} />
            <Tab.Screen name="Events" component={SettingsScreen} options={{headerShown: false}} />
            <Tab.Screen name="Discussion" component={SettingsScreen} options={{headerShown: false}} />
            <Tab.Screen name="Progress" component={SettingsScreen} options={{headerShown: false}} />
        </Tab.Navigator>
    )
}

【讨论】：