1、首先安裝好ReactNative的運行環(huán)境馅袁，安裝組件依賴庫

使用npm install react-native-tab-navigator --save安裝所依賴的第三方庫

2域慷、導(dǎo)入

import TabNavigator from 'react-native-tab-navigator';

3、使用

               <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'home'}
                        title="業(yè)務(wù)服務(wù)"
                        selectedTitleStyle={{color:"#007aff"}}//設(shè)置tab標題顏色
                        renderIcon={() => <Image style={styles.icon} source={require('./res/image/fw1.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/fw2.png')} />}//設(shè)置圖標選中顏色
                        // badgeText="1"
                        onPress={() => this.setState({ selectedTab: 'home' })}>
                        <View style={styles.pages1}>
                            <Text>這是首頁</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'shebei'}
                        title="設(shè)備列表"
                        selectedTitleStyle={{color:"#007aff"}}
                        badgeText="1"
                        renderIcon={() => <Image style={styles.icon} source={require('./res/image/lb1.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/lb2.png')} />}
                        // renderBadge={() => <CustomBadgeView />}
                        onPress={() => this.setState({ selectedTab: 'shebei' })}>
                        <View style={styles.pages2}>
                            <Text>設(shè)備列表</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'hetong'}
                        title="合同管理"
                        selectedTitleStyle={{color:"#007aff"}}
                        renderIcon={() => <Image style={styles.icon} source={require('./res/image/ht1.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/ht2.png')} />}
                        // renderBadge={() => <CustomBadgeView />}
                        onPress={() => this.setState({ selectedTab: 'hetong' })}>
                        <View style={styles.pages3}>
                            <Text>合同管理</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'qiye'}
                        title="企業(yè)信息"
                        selectedTitleStyle={{color:"#007aff"}}
                        renderIcon={() => <Image style={styles.icon} source={require('./res/image/qy1.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/qy2.png')} />}
                        // renderBadge={() => <CustomBadgeView />}
                        onPress={() => this.setState({ selectedTab: 'qiye' })}>
                        <View style={styles.pages4}>
                            <Text>個人中心</Text>
                        </View>
                    </TabNavigator.Item>
                </TabNavigator>

還需要在構(gòu)造方法中初始化數(shù)據(jù)汗销，默認讓第一個tab選中

    constructor(props) {
        super(props);
        this.state = {selectedTab: "home"}
    }

4犹褒、運行結(jié)果

運行截圖.png