如何自定义材料底部标签？

Question

我想自定义 MaterialBottomTabs，我尝试了很长时间，请帮助我，我也是 react-native 的新手。 在这里，我分享了我想要的底部选项卡的屏幕截图，

在这里我分享当前底部标签栏的屏幕截图

请帮我提前谢谢。

Answer 1

要设置标签导航器的样式，您可以使用 tabBarOptions 道具 使用 labelStyle 设置标签样式，使用 tabStyle 设置标签等。

要使文本出现在 2 行中，您需要设置标签宽度或添加填充

要在活动标签下方添加一行，请使用 https://stackoverflow.com/a/47025116/13196047 中的 indicatorStyle

这些选项只是一个例子，您需要根据自己的风格自定义它们...

const options = {
    style: { height: 36 },
    labelStyle: { fontSize: 12 }, 
    tabStyle: { marginTop: -5 }
    indicatorStyle: { borderBottomColor: 'white', borderBottomWidth: 1 }
}


<Tab.Navigator tabBarOptions={options} >
    <Tab.Screen name="CropDetail" component={CropDetail} />
    <Tab.Screen name="SoilReport" component={SoilReport} />
    <Tab.Screen name="SomeOther" component={Component} />
</Tab.Navigator>