加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

底部导航组件组件react-native-tab-navigator的使用

发布时间:2020-12-15 20:27:18 所属栏目:百科 来源:网络整理
导读:组件react-native-tab-navigator的使用 1、npm安装,导入组件react-native-tab-navigator import TabNavigator from ‘react-native-tab-navigator‘; 2、代码如下 View style={styles.container}TabNavigatorTabNavigator.Itemselected={this.state.selecte
组件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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读