组件react-native-tab-navigator的使用
1、npm安装,导入组件react-native-tab-navigator
import TabNavigator from ‘react-native-tab-navigator‘;
2、代码如下
<View style={styles.container}><TabNavigator><TabNavigator.Itemselected={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.Itemselected={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.Itemselected={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,marginTop:20}} source={require(‘./res/images/Home-shop.png‘)} />}// badgeText="1"onPress={() => this.setState({ selectedTab: ‘shop‘ })}><View style={styles.page}></View></TabNavigator.Item><TabNavigator.Itemselected={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.Itemselected={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>