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