Question

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

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

Answer 2

尝试一下添加标签栏选项例

Answer 3

我试过了，效果很好！

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

export default Navigator;

反应导航：底部标签样式

3 个答案: