自定义 Native Base 选项卡答案

【问题标题】：Customize Native Base tabs自定义 Native Base 选项卡
【发布时间】：2018-06-30 23:19:00
【问题描述】：

我刚刚开始学习 React Native。
现在我需要帮助来自定义我的标签。我正在使用 Native Base 的高级选项卡。
我想改变这个：

变成这样：

我已经检查了本机基础文档以设置选项卡的样式，但我不知道将这些属性放在哪里：

这是我的一些代码：

<Container>
                    <Header
                        style={styles.headerColor}
                        iosBarStyle='light-content'
                    >
                        <Left>
                            <Button transparent onPress={()=>this.openDrawer()}>
                                <Icon name='ios-menu' style={styles.icons}/>
                            </Button>
                            </Left>
                        <Body>
                            <Title style={styles.headerTitle}>INQUIRY LIST</Title>
                        </Body>
                        <Right>
                            <Button transparent>
                                <Icon name='ios-search' style={styles.icons}/>
                            </Button>
                        </Right>
                    </Header>
                    <Tabs activeTabStyle={{borderBottomColor: '#fff'}}>
                        <Tab heading={ <TabHeading><Text style={styles.tabsText}>ALL</Text></TabHeading>}>
                            {/* <Tab1 /> */}
                        </Tab>
                        <Tab heading={ <TabHeading><Text style={styles.tabsText}>NEW</Text></TabHeading>}>
                            {/* <Tab2 /> */}
                        </Tab>
                        <Tab heading={ <TabHeading><Text style={styles.tabsText}>RECEIVED</Text></TabHeading>}>
                            {/* <Tab3 /> */}
                        </Tab>
                        <Tab heading={ <TabHeading><Text style={styles.tabsText}>IN PROGRESS</Text></TabHeading>}>
                            {/* <Tab3 /> */}
                        </Tab>
                        <Tab heading={ <TabHeading><Text style={styles.tabsText}>COMPLETED</Text></TabHeading>}>
                            {/* <Tab3 /> */}
                        </Tab>
                    </Tabs>
                    <Text>Hi from Inquiries</Text>
                </Container>

const styles = StyleSheet.create({
    tabsText:{
      fontSize: 10
    },
    headerColor:{
      backgroundColor: '#1b1b1b'
    },
    activeTab:{
      borderBottomColor: '#fff'
    }
  });

【问题讨论】：

标签： javascript ios css react-native

【解决方案1】：

这是我设计标签的方式。根据需要更改样式。

<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>

您需要为每个选项卡指定样式。

【讨论】：

这不起作用。这将设置各个选项卡的样式，但不会设置它们周围的区域。
图标怎么放？

【解决方案2】：

在打开选项卡中删除 <ScrollableTab /> 自定义您自己的

  <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>
    }
  >

【讨论】：

为什么投反对票？这实际上比接受的答案更好。选项卡“renderTabBar”允许您将默认选项卡栏替换为自定义选项卡。