如何自定义 material-bottom-tabs？

Question

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

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

请帮帮我先谢谢了。

Answer 1

要设置选项卡导航器的样式，您需要使用 tabBarOptions 道具使用 labelStyle 设置标签样式，使用 tabStyle 设置选项卡等

要使文本分两行显示，您需要设置标签宽度或添加填充

要在活动选项卡下方添加一行，请使用 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>

如何自定义 material-bottom-tabs？

How to Customize material-bottom-tabs?

reactjs

react-native

react-navigation