Javascript 自定义本机基本选项卡

我才刚开始学习React Native。
现在我需要帮助来自定义我的选项卡。我正在使用本机的高级选项卡。
我想改变这一点：

像这样：

我已经查看了本机基本文档中的选项卡样式，但我不知道将这些属性放在何处：

这里是我的一些代码：

this.openDrawer（）}>
查询表
{/*  */}
{/*  */}
{/*  */}
{/*  */}
{/*  */}
你好，来自问讯处

const styles=StyleSheet.create({
tabsText：{
字体大小：10
},
头部颜色：{
背景颜色：“#1b1b”
},
活动选项卡：{
borderBottomColor:“#fff”
}
});以下是我如何设计选项卡的。根据需要更改样式

<Tabs tabBarUnderlineStyle={{ backgroundColor: '#f9ec97' }}>
                    <Tab heading="Description" activeTextStyle={{ color: '#fff', fontWeight: 'bold' }} textStyle={{ color: '#fff', fontSize: 12 }} tabStyle={{ backgroundColor: '#2f2483' }} activeTabStyle={{ backgroundColor: '#2f2483' }} >
                        {/* <Tab1 /> */}
                    </Tab>
.....
                </Tabs>


{/*  */}
.....

您需要为每个选项卡指定样式。
在打开选项卡时删除
自定义您自己的选项卡

  <Tabs
    onChangeTab
    ref={(ref) => this.tabref = ref}
    renderTabBar={() => (
      <View style={{
        backgroundColor:"yellow",
        flexDirection:"row",
        justifyContent:"center"
      }}>
        <TouchableOpacity
          activeOpacity={1}
          onPress={() => this.tabref.goToPage(0)}
          activeTabStyle={{backgroundColor:"yellow"}}
          style={{
            backgroundColor:"red",
            width:width * 0.50,
            height:50,
            justifyContent:"center",
            alignItems:"center"
          }}>
          <Text>Sign In</Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={1}
          onPress={() => this.tabref.goToPage(1)}
          style={{
            backgroundColor:"green",
            width:width * 0.50,
            height:50,
            justifyContent:"center",
            alignItems:"center"
          }}>
          <Text>Sign Up</Text>
        </TouchableOpacity>
      </View>
    }
  >

this.tabref=ref}
renderTabBar={（）=>(
this.tabref.goToPage（0）}
activeTabStyle={{backgroundColor:“黄色”}
风格={{
背景颜色：“红色”，
宽度：宽度*0.50，
身高：50，
辩护内容：“中心”，
对齐项目：“中心”
}}>
登录
this.tabref.goToPage（1）}
风格={{
背景颜色：“绿色”，
宽度：宽度*0.50，
身高：50，
辩护内容：“中心”，
对齐项目：“中心”
}}>
注册
}
>
这不起作用。这将设置单个选项卡的样式，但不会设置其周围区域的样式。如何放置图标？为什么会出现向下投票？这实际上比接受的答案更有效。选项卡“renderTabBar”允许您将默认选项卡栏替换为自定义选项卡栏。