Reactjs 如何自定义物料底部选项卡？

我想定制MaterialBottomTabs，我尝试了很长时间，请帮助我，我也是react native的新手。 下面是我想要的bottomTab的截图

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

---

请帮助我提前感谢。

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

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

要在活动选项卡下方添加一行，请使用指示符号样式，如中所示

这些选项只是一个示例，您需要根据自己的风格对其进行自定义

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>

const选项={
样式：{高度：36}，
标签样式：{fontSize:12}，
选项卡样式：{marginTop:-5}
指示符样式：{borderBottomColor:'white'，borderBottomWidth:1}
}

到目前为止，您尝试了什么？