如何在本机反应中更改底部选项卡导航器样式答案

【问题标题】：How to change bottom tab navigator styles in react native如何在本机反应中更改底部选项卡导航器样式
【发布时间】：2021-08-14 21:32:10
【问题描述】：

我正在制作一个应用程序，我希望我的底部标签导航器看起来像这样：

我有样式，但我不知道如何更改底部标签导航器..

const styles = StyleSheet.create({
 tabBar: {
   backgroundColor: 'white',
   borderTopLeftRadius: 20,
   borderTopRightRadius: 20,
 },
});

源代码：

https://snack.expo.dev/@therealsneh/justexpire---real

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

步骤 1) 使用 @react-navigation/material-bottom-tabs 而不是 @react-navigation/bottom-tabs

步骤 2) 使用 `const Tab = createMaterialBottomTabNavigator(); 创建导航

第 3 步）`在此处使用此代码，它会创建一个 tab.navigator，并设置颜色和图标的样式：

<Tab.Navigator
        labeled={false}
        barStyle={styles.bottomTabStyle}
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === 'screen1') {
              iconName = focused ? 'youricon' : 'youricon-outline';
            } else if (route.name === 'screen2') {
              iconName = focused ? 'youricon' : 'youricon-outline';
            } else if (route.name === 'screen3') {
              iconName = focused ? 'youricon' : 'youricon-outline';
            } 
            return (
              <Ionicons
                name={iconName}
                size={RFValue(25)}
                color={color}
                style={styles.icons}
              />
            );
          },
        })}
        activeColor={'#D4A608'}
        inactiveColor={'gray'}>

步骤 4) 在您的样式表中，使用颜色自定义样式。您可以在上面更改图标名称：

步骤5）添加组件，然后关闭

希望能解决你的疑惑。

【讨论】：