Reaction Navigation：底部标签样式

Question

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

Image

<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

没有这样的容器

Answer 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道具。您可以在其中更改底部栏的显示方式。