跨平台开发RN-组件TabNavigator
TabNavigator
- 一个跨平台的TabBar第三方框架组件，可以用于iOS和安卓平台
- 在项目中安装TabNavigator模块
-
将命令行定位到当前项目的路径
npm install react-native-tab-navigator --save
-
-
引入组件
//引入tabbar支持包 import TabNavigator from 'react-native-tab-navigator'; import TabNavigatorItem from 'react-native-tab-navigator/TabNavigatorItem'; - 相应组件的意义
TabNavigator组件指的就是下面那个横条TabNavigatorItem是每一个横条中的每一个选项- `
`中间放一个View做为这个选项卡对应的组件
- `
- 常见属性
-
TabNavigator的常见属性
属性 默认值 类型 描述 sceneStyle: inherited object (style) 定义渲染的场景 tabBarStyle: inherited object (style) tabBar的样式 tabBarShadowStyle: inherited object (style) tabBar的阴影 hidesTabTouch： false boolean 禁用选项卡的onPress -
TabNavigatorItem常用属性
renderIcon: function 选项卡图标 renderSelectedIcon: function 选项卡选中状态图标 badgeText: string or number 图标右上角显示 renderBadge: function 返回Item badge title: string tabbar标题 titleStyle: style 标题样式 selectedTitleStyle: style 选中状态标题样式 tabStyle: style 选项卡样式 selected: boolean 是否选中该tabbar onPress: function 点击Item allowFontScaling: boolean 允许标题的字体缩放 accessible accessibilityLabel testID
-
-
使用示例
<TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === 'home'} title="Home" renderIcon={() => <Image source={...} />} renderSelectedIcon={() => <Image source={...} />} badgeText="1" onPress={() => this.setState({ selectedTab: 'home' })}> {homeView} </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'profile'} title="Profile" renderIcon={() => <Image source={...} />} renderSelectedIcon={() => <Image source={...} />} renderBadge={() => <CustomBadgeView />} onPress={() => this.setState({ selectedTab: 'profile' })}> {profileView} </TabNavigator.Item> </TabNavigator> - 隐藏TabBar
-
通过设置styles，隐藏TabBar
let tabBarHeight = 0; <TabNavigator tabBarStyle={* height: tabBarHeight, overflow: 'hidden' }} sceneStyle={* paddingBottom: tabBarHeight }} />
-
- 举例使用
- 效果图如下：
-
代码如下：
import React, {Component} from 'react'; import {View, StyleSheet, Text, Image} from 'react-native'; import Main from './Component/ZHMain'; import TabNavigator from 'react-native-tab-navigator'; import TabNavigatorItem from 'react-native-tab-navigator/TabNavigatorItem'; class Enty9 extends Component { constructor(props) { super(props); this.state = { //设置默认被选中的Item selectedTabBarItem: 'home', }; } render() { return ( <View style={styles.container}> {/*假导航条*/} <View style={styles.headerViewStyle}> <Text style={*color: 'white', fontSize: 16}}>TabBar选项卡切换</Text> </View> {/*TabBar部分*/} <TabNavigator //设置tabBar的样式 tabBarStyle={*height: 49, backgroundColor: 'white'}}> <TabNavigatorItem //设置bandge值 // badgeText="3" //判断当前是否被选中 selected={this.state.selectedTabBarItem == 'home'} //监听item点击 onPress={() => this.setState({selectedTabBarItem: 'home'})} title="首页" //未选中图标 renderIcon={() => ( <Image source={require('./img/tabbar_h.png')} style={*width: 25, height: 25}} /> )} //选中图标 renderSelectedIcon={() => ( <Image source={require('./img/tabbar_hs.png')} style={*width: 25, height: 25}} /> )} //选中标题颜色 selectedTitleStyle={*color: 'orange'}} //自定义badge的样式 renderBadge={this.addBadgeText} // titleStyle={*color: 'purple'}} > <View style={[styles.commonViewStyle, {backgroundColor: 'red'}]}> <Text>首页</Text> </View> </TabNavigatorItem> <TabNavigatorItem //设置bandge值 badgeText="3" //判断当前是否被选中 selected={this.state.selectedTabBarItem == 'second'} //监听item点击 onPress={() => this.setState({selectedTabBarItem: 'second'})} title="发现" renderIcon={() => ( <Image source={require('./img/tabbar_d.png')} style={*width: 25, height: 25}} /> )} //选中图标 renderSelectedIcon={() => ( <Image source={require('./img/tabbar_ds.png')} style={*width: 25, height: 25}} /> )} //选中标题颜色 selectedTitleStyle={*color: 'orange'}}> <View style={[styles.commonViewStyle, {backgroundColor: 'green'}]}> <Text>第二页</Text> </View> </TabNavigatorItem> <TabNavigatorItem //判断当前是否被选中 selected={this.state.selectedTabBarItem == 'three'} //监听item点击 onPress={() => this.setState({selectedTabBarItem: 'three'})} title="消息" renderIcon={() => ( <Image source={require('./img/tabbar_m.png')} style={*width: 25, height: 25}} /> )} //选中图标 renderSelectedIcon={() => ( <Image source={require('./img/tabbar_ms.png')} style={*width: 25, height: 25}} /> )} //选中标题颜色 selectedTitleStyle={*color: 'orange'}}> <View style={[styles.commonViewStyle, {backgroundColor: 'blue'}]}> <Text>第三页</Text> </View> </TabNavigatorItem> <TabNavigatorItem //判断当前是否被选中 selected={this.state.selectedTabBarItem == 'four'} //监听item点击 onPress={() => this.setState({selectedTabBarItem: 'four'})} title="我的" renderIcon={() => ( <Image source={require('./img/tabbar_p.png')} style={*width: 25, height: 25}} /> )} //选中图标 renderSelectedIcon={() => ( <Image source={require('./img/tabbar_ps.png')} style={*width: 25, height: 25}} /> )} //选中标题颜色 selectedTitleStyle={*color: 'orange'}}> <View style={[styles.commonViewStyle, {backgroundColor: 'purple'}]}> <Text>第四页</Text> </View> </TabNavigatorItem> </TabNavigator> </View> ); } //自定义Badge addBadgeText = () => { return ( <View style={* height: 16, justifyContent: 'center', backgroundColor: 'red', borderRadius: 8, // marginTop: 3, }}> <Text style={*color: 'white', fontSize: 8}}>122</Text> </View> ); }; } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'gray', }, commonViewStyle: { flex: 1, justifyContent: 'center', alignItems: 'center', }, headerViewStyle: { height: 64, backgroundColor: 'black', justifyContent: 'center', alignItems: 'center', }, }); export default Enty9;
- 效果图如下：
-
精简代码示例
import React,{Component} from 'react'; import { View, Text, Image, StyleSheet, Platform,// 判断当前运行的系统 } from 'react-native'; /** * 导入第三方组件 * 1，tabBar---- 命令行：'npm install react-native-tab-navigator --save' */ import TabNavigator from 'react-native-tab-navigator'; /** * 导入根组件 */ import Home from '../Home/HomeComponent' import Shop from '../Shop/ShopComponent' import More from '../More/MoreComponent' import Mine from '../Mine/MineComponent' // iOS思路： tabBar -> navigation -> contorller // rn思路： navigator -> tabBar -> component (tabBar当做普通组件) export default class MainComponent extends Component{ // 状态机，记录选中的组件 constructor(props){ super(props); this.state={ selectTab:'home' } } render(){ return( <TabNavigator> {/*首页*/} {this._renderTabBarItem('首页','home','icon_tabbar_homepage','icon_tabbar_homepage_selected','首页',Home)} {/*商家*/} {this._renderTabBarItem('商家','shop','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','商家',Shop)} {/*我的*/} {this._renderTabBarItem('我的','mine','icon_tabbar_mine','icon_tabbar_mine_selected','我的',Mine)} {/*更多*/} {this._renderTabBarItem('更多','more','icon_tabbar_misc','icon_tabbar_misc_selected','更多',More)} </TabNavigator> ); } // 抽出创建TabNavigator方法 _renderTabBarItem(itemTitle,selectTabName,normalName,selectedName,componentName,component){ return( <TabNavigator.Item title={itemTitle} selectedTitleStyle={styles.selectedTitleStyle} selected={this.state.selectTab=== selectTabName} renderIcon={()=><Image source={*uri:normalName}} style={styles.iconStyle}/>} renderSelectedIcon={()=><Image source={*url:selectedName}} style={styles.iconStyle}/>} onPress={()=>{ this.setState({ selectTab:selectTabName }) }} > {this._renderComponent(selectTabName)} </TabNavigator.Item> ); } _renderComponent(index){ if (index==='home'){ return(<Home navigator={this.props.navigator}/>); } else if (index === 'shop'){ return(<Shop navigator={this.props.navigator}/>); } else if (index === 'mine'){ return(<Mine navigator={this.props.navigator}/>); } else { return(<More navigator={this.props.navigator}/>); } } } const styles = StyleSheet.create({ iconStyle:{ width: Platform.OS === 'ios'? 25:20, height:Platform.OS === 'ios'? 25:20, }, selectedTitleStyle:{ color:'orange' } });