React-native之开源Tab导航组件（17）

一. 简介

大多数应用都会有导航进行页面切换，React Native原生的控件仅有TabBarIOS可供iOS平台使用，如果想同时适配Android和IOS,最好使用第三方控件，比如:react-native-tab-navigator
地址:https://github.com/exponent/react-native-tab-navigator

二. 使用

（1）安装
在项目根目录下 使用命令行安装 npm install react-native-tab-navigator --save
（2）导入
import TabNavigator from 'react-native-tab-navigator';
（3）使用示例
class HomeUI extends Component { constructor(props) { super(props);//这一句不能省略，照抄即可 this.state={ selectedTab:'home'//默认选中home } } render(){ var homeView=( <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}> <Text style={{fontSize: 30}}>首页</Text> </View> ); var settingView=( <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}> <Text style={{fontSize: 30}}>设置</Text> </View> ); return ( <TabNavigator tabBarStyle={{ height: 60 }} > <TabNavigator.Item selected={this.state.selectedTab === 'home'} title="首页" //Tab文字 renderIcon={() => <Image style={styles.img} source={require('./home_tab_home_normal.png') }/>}//默认图标 renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_home_pressed.png') }/>}//选中图标 badgeText="9+"//消息数目 onPress={() => this.setState({ selectedTab: 'home' })} > {homeView} </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'setting'} title="设置" renderIcon={() => <Image style={styles.img} source={require('./home_tab_setting_normal.png') }/>} renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_setting_pressed.png') }/>} onPress={() => this.setState({ selectedTab: 'setting' })} > {settingView} </TabNavigator.Item> </TabNavigator> ); } } const styles = StyleSheet.create({ flex:{ flex:1, }, center:{ justifyContent:'center', alignItems:'center' }, img: { width: 40, height: 33, }, });
效果