底部导航组件组件react-native-tab-navigator的使用
组件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>
</Tab 5b4 Navigator.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>
3、路由的嵌套容易造成布局的混乱,比如头部标题等无法显示
- react native android使用react-native-tab-navigator来做底部导航tabbar(2)一个坑:navigator
- react native android使用react-native-tab-navigator来做底部导航tabbar(1)
- 使用 react-native-tab-navigator 创建 TabBar 组件
- ReactNative学习实例(八) 第三方组件TabNavigator底部导航栏
- React Native底部导航react-native-tab-navigator
- react-native-tab-navigator来做底部导航tabbar
- react-native-tab-navigator 拓展 - 隐藏和显示底部导航
- react-native-tab-navigator组件的基本使用示例代码
- 【原创】东方耀reactnative 视频31之-开源导航组件 react-native-tab-navigator
- react native之TabBar底部导航(兼容Android和IOS)--react-native-tab-navigator
- TabBar切换页的实现——React-native-tab-navigator的使用
- React-Native学习--第三方 底部Tab react-native-tab-navigator
- React—native 之 Navigator (导航路由)组件
- react-native-tab-navigator简单使用
- 【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)
- ReactNative的Navigator组件使用方式
- ReactNative基础(六)使用react-navigation实现页面导航布局效果(TabNavigator)
- React-Native学习笔记之:使用Tab react-native-tab-navigator框架
- React_Native 再学习3——导航进阶之TabNavigator
- ReactNative-底部TabBar react-native-tab-navigator