一. 簡介
大多數應用都會有導航進行頁面切換，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+"http://消息數目 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, }, });
效果
