TabBarIOS界面之间切换

知识点学习：React Native常用组件之TabBarIOS和TabBarIOS.Item组件

1.代码

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TabBarIOS } from 'react-native'; // 导入系统类 var Dimensions = require('Dimensions'); var screenW = Dimensions.get('window').width; var TabBarDemo = React.createClass({ // 设置初始值 getInitialState(){ return{ // 默认选中的tabBarItem selectedItem:'home', } }, render() { return ( <View style={styles.container}> <View style={styles.navBarStyle}><Text style={styles.navTitleStyle}>TabBar切换</Text></View> <TabBarIOS barTintColor='#e8e8e8' tintColor="purple" style={styles.tabBarStyle} > <TabBarIOS.Item systemIcon="bookmarks" badge="3" selected={this.state.selectedItem == 'home'} onPress={()=>{ this.setState({selectedItem:'home'}) }} > <View style={styles.commonViewStyle}> <Text>bookmarks</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="downloads" selected={this.state.selectedItem == 'second'} onPress={()=>{ this.setState({selectedItem:'second'}) }} > <View style={styles.commonViewStyle}> <Text>downloads</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="favorites" selected={this.state.selectedItem == 'three'} onPress={()=>{ this.setState({selectedItem:'three'}) }} > <View style={styles.commonViewStyle}> <Text>favorites</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="more" selected={this.state.selectedItem == 'four'} onPress={()=>{ this.setState({selectedItem:'four'}) }} > <View style={styles.commonViewStyle}> <Text>more</Text> </View> </TabBarIOS.Item> </TabBarIOS> </View> ); } }); const styles = StyleSheet.create({ container: { flex:1, }, // 导航栏样式 navBarStyle:{ height:64, backgroundColor:'purple', justifyContent:'center', alignItems:'center', }, navTitleStyle:{ color:'#fff', fontSize:20, }, commonViewStyle:{ flex:1, justifyContent:'center', alignItems:'center' }, }); AppRegistry.registerComponent('TabBarDemo', () => TabBarDemo);

2.演示：