React Navigation：底部选项卡样式答案

【问题标题】：React Navigation: Bottom Tabs styleReact Navigation：底部选项卡样式
【发布时间】：2020-05-20 01:48:47
【问题描述】：

如何在底部选项卡上应用样式，使其看起来与此模型相似？

<HomeTabs.Navigator
        screenOptions={({route})=>({
            tabBarIcon: ({color, size})=>{
                const {name} = icons[route.name]
                return <Ionicons name={name} size={size} color={color}/>
            }
        })}
        tabBarOptions={
            {
                style: {
                    height: 50,
                    width: 300,
                    flexDirection: 'column',
                    alignSelf: 'center',
                    elevation: 2,
                    borderTopStartRadius: 5,
                    borderTopEndRadius: 5,

                },
                activeTintColor: '#845EC2',
            }
        }
    >

结果：

Result

没有这样的容器

【问题讨论】：

不完全确定您的代码是什么，但您需要在导航器的 barStyle 属性中添加边距。如果您发布您拥有的代码，我可以帮助您获得与图像匹配的代码
有什么解决办法吗？
@Aousafrashid 解决方案是在标签导航中使用绝对位置

标签： reactjs react-native react-native-navigation

【解决方案1】：

这是我想出来的，因为没有代码。希望这能有所帮助。

const Tab = createMaterialBottomTabNavigator();


const Navigator = () => {
  return (

  <NavigationContainer>

  <Tab.Navigator
    initialRouteName="Something"
    barStyle={{ marginLeft:10, marginRight:10 }} //This is where you can manipulate its look. 
    >


    <Tab.Screen name="firstOne" component={Something1}/>

    <Tab.Screen name="secondOne" component={Something2}/>

    <Tab.Screen name="thirdOne" component={Something3}/>

  </Tab.Navigator>
</NavigationContainer>

  );
}

注意barStyle 属性。您可以在此处更改底部栏的显示方式。

【讨论】：

这个 barStyle 不是 prop
哦，你用的是materialBottomTabs

【解决方案2】：

tabBarStyle 为我工作。更多样式选项请参考官方文档click here。

<Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
    
                    if (route.name === 'Home') {
                        iconName = focused? 'ios-home-sharp': 'ios-home-outline';
                    } else if (route.name === 'Favourites') {
                        iconName = focused ? 'ios-heart-sharp' : 'ios-heart-outline';
                    }
                   
                    // You can return any component that you like here!
                    return <Ionicons name={iconName} size={size} color={color} />;
                },
                tabBarActiveTintColor: '#58ceb2',
                tabBarInactiveTintColor: 'gray',
                //Tab bar styles can be added here
                tabBarStyle:{paddingVertical: 5,borderTopLeftRadius:15,borderTopRightRadius:15,backgroundColor:'white',position:'absolute',height:50},
                tabBarLabelStyle:{paddingBottom:3},
            })}
          >
            <Tab.Screen name="Home" component={HomeStackScreen} options={{headerShown: false}}/>
            <Tab.Screen name="Favourites" component={FavouritesScreen} />
            
          </Tab.Navigator>

【讨论】：

【解决方案3】：

试试这个添加选项卡选项例子

<tab.navigation tabbaroptions={{barstyle : styles.container}} >

【讨论】：

欢迎来到 StackOverflow！您能否正确格式化您的代码示例？

【解决方案4】：

我试过了，效果很好！

const Navigator = () => (
  <Tab.Navigator tabBarOptions={{style:{backgroundColor: 'yellow'}}}> //do styling here
    <Tab.Screen/>
    <Tab.Screen/>
    <Tab.Screen/>
  </Tab.Navigator>
)

export default Navigator;

【讨论】：

【解决方案5】：

我可以使用它：

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: Colors.darkGrey,
  },
  headerTintColor: Colors.richGold,
  headerBackTitle: "",
  tabBarStyle: [{ backgroundColor: Colors.darkGrey }], <--- HERE
};

 <Tab.Navigator screenOptions={screenOptionStyle}>

【讨论】：