React native 如何使用react navigation和react native创建如图所示的选项卡栏？

如何使用react navigation和react native创建如图所示的选项卡栏？ 如图所示，如何使用“圆形”选项卡菜单？我应该使用本机svg路径吗

我尝试了以下代码：

export default class TabNavigatorComponent extends Component {
constructor(props) {
    super(props);
}
render() {
    return (
        <View style={styles.wrapper}>
            <View style={styles.container}>
                <View style={styles.tabContainer}>
                    <Text>Tab1</Text>
                </View>
                <View style={styles.tabContainer}>
                    <Text>Tab2</Text>
                </View>
                <View style={styles.tabContainer}>
                    <Text>Tab3</Text>
                </View>
            </View>
        </View>
    )
  }
 }

---

您应该从选项卡导航中阅读本指南。然后，你可以像其他人一样对它进行风格设计。

我这样做了，但我的问题是我无法设计图片。如图所示，我如何使用“圆形”选项卡菜单？我应该使用本机svg路径吗？这些可能会有帮助：，谢谢@sdn404，很遗憾，我找不到我想要的确切答案，但仍然很有帮助。

const styles=StyleSheet.create({
  wrapper:{
    flex:1,
    display: 'flex',
    justifyContent:'flex-end',
    alignItems:'center',
    backgroundColor:colors.white,
},
  container:{
    flexDirection:'row',
  justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: colors.green01,
    height:50,
    width:screenInfo.width,
},
  tabContainer:{

    height:80,
    width:80,
    borderRadius:70,
    borderColor:colors.white,
    borderWidth: 1,
    marginBottom: 20,
    backgroundColor: colors.green01,
},

});