底部導航組件組件react-native-tab-navigator的使用
阿新 • • 發佈：2018-07-10
ntop ner 發現 image res png file col ren 組件react-native-tab-navigator的使用
1、npm安裝，導入組件react-native-tab-navigator
import TabNavigator from ‘react-native-tab-navigator‘;
1、npm安裝，導入組件react-native-tab-navigator
import TabNavigator from ‘react-native-tab-navigator‘;
2、代碼如下
<View style={styles.container}>
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === ‘home‘}
selectedTitleStyle={styles.btselcttext}
title="Home"renderIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-home.png‘)} />}
renderSelectedIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-home1.png‘)} />}
// badgeText="1"
onPress={() => this.setState({ selectedTab: ‘home‘ })}>
<View style={styles.page}></View></TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === ‘messge‘}
selectedTitleStyle={styles.btselcttext}
title="消息"
renderIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-messge.png‘)} />}
renderSelectedIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-messge1.png‘)} />}// badgeText="1"
// renderBadge={() => <CustomBadgeView style={{backgroundColor:‘red‘}} />}
onPress={() => this.setState({ selectedTab: ‘messge‘ })}>
<View style={styles.page}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === ‘shop‘}
selectedTitleStyle={styles.btselcttext}
// title="shop"
renderIcon={() => <Image style={{width:34,height:34,marginTop:20}} source={require(‘./res/images/Home-shop.png‘)} />}
renderSelectedIcon={() => <Image style={{width:34,height:34,marginTop:20}} source={require(‘./res/images/Home-shop.png‘)} />}
// badgeText="1"
onPress={() => this.setState({ selectedTab: ‘shop‘ })}>
<View style={styles.page}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === ‘find‘}
selectedTitleStyle={styles.btselcttext}
title="發現"
renderIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-find.png‘)} />}
renderSelectedIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-find1.png‘)} />}
// badgeText="1"
onPress={() => this.setState({ selectedTab: ‘find‘ })}>
<View style={styles.page}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === ‘profile‘}
selectedTitleStyle={styles.btselcttext}
title="我的"
renderIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-my.png‘)} />}
renderSelectedIcon={() => <Image style={styles.image} source={require(‘./res/images/Home-my1.png‘)} />}
// renderBadge={() => <CustomBadgeView />}
onPress={() => this.setState({ selectedTab: ‘profile‘ })}>
<View style={styles.page1}></View>
</TabNavigator.Item>
</TabNavigator>
</View>
底部導航組件組件react-native-tab-navigator的使用