Question

我刚开始学习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'
    }
  });

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

您需要为每个标签指定样式。

Answer 2

在打开标签页中，删除您拥有的“ <” ScrollableTab /“>”

“ <” Tabs onChangeTab ref = {（ref）=> this.tabref = ref} renderTabBar = {（）=> this.tabref.goToPage（0）} activeTabStyle = {{backgroundColor：“ yellow”}} style = {{backgroundColor：“ red”，width：width * 0.50，height：50，justifyContent：“ center”，alignItems：“ center “}}>登录 this.tabref.goToPage（1）} style = {{backgroundColor：“ green”，width：width * 0.50，height：50，justifyContent：“ center”，alignItems：“ center”}}}>注册 }“>”

自定义Native Base选项卡

2 个答案: