React-navigator之TabNavigtion2

例：

import React from 'react';import {   AppRegistry,   Text,   View,   StyleSheet,   Platform,   ScrollView,   Image,   Button,}  from 'react-native';import { TabNavigator } from 'react-navigation';// import Ionicons from 'react-native-vector-icons/Ionicons'; 访问不到，暂且使用Image替换使用。const MyNavScreen = ({ navigation, banner }) => (  <ScrollView style={styles.container}>    <Text style = {{fontSize : 30 , alignSelf : 'center' , color : 'red' }}>{banner}</Text>  </ScrollView>);const MyHomeScreen = ({ navigation }) => (<View>         <MyNavScreen banner="Home Tab" navigation={navigation} /></View>);MyHomeScreen.navigationOptions = {  tabBarLabel: 'Home',  tabBarIcon: () => (     <View>          <Image             source={require('./img/icon_1.png')}             style={styles.icon}          />     </View>    ),};const MyPeopleScreen = ({ navigation }) => (  <View>       <MyNavScreen banner="People Tab" navigation={navigation} />  </View>);MyPeopleScreen.navigationOptions = {  tabBarLabel: 'People',  tabBarIcon: () => (     <View>          <Image             source={require('./img/icon_1.png')}             style={styles.icon}          />     </View>    ),};const MyChatScreen = ({ navigation }) => (<View>       <MyNavScreen banner="Chat Tab" navigation={navigation} />    </View>);MyChatScreen.navigationOptions = {  tabBarLabel: 'Chat',  tabBarIcon: () => (     <View>          <Image             source={require('./img/icon_1.png')}             style={styles.icon}          />     </View>    ),};const MySettingsScreen = ({ navigation }) => (   <View>       <MyNavScreen banner="Settings Tab" navigation={navigation} />    </View>);MySettingsScreen.navigationOptions = {  tabBarLabel: 'Settings',  tabBarIcon: () => (     <View>          <Image             source={require('./img/icon_1.png')}             style={styles.icon}          />     </View>    ),};const MyFirstProject = TabNavigator({    Home: {      screen: MyHomeScreen,      path: 'home',    },    People: {      screen: MyPeopleScreen,      path: 'people',    },    Chat: {      screen: MyChatScreen,      path: 'chat',    },    Settings: {      screen: MySettingsScreen,      path: 'settings',    },  },  {    tabBarOptions: {      activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',       inactiveTintColor: '#999', // 文字和图片未选中颜色          showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示          showLabel: true, // android 是否展现文字 默认 true           upperCaseLabel : false, //android 文字是否需要大写 默认true           pressColor : 'blue', // android 按压时显示的颜色           scrollEnabled : false,          indicatorStyle: {              height: 2  // 如TabBar下面显示有一条线，可以设高度为0后隐藏          },           style: {              backgroundColor: '#ff6449', // TabBar 背景色              // height: 50,          },          labelStyle: {              fontSize: 15, // 文字大小              paddingTop:0,              marginTop:0,          },          tabStyle:{            marginTop:10,              height: 50,          },    },  });const styles = StyleSheet.create({  container: {    marginTop: Platform.OS === 'ios' ? 20 : 0,  },   icon: {    width: 20,    height: 20,  },});AppRegistry.registerComponent('MyFirstProject' , () => MyFirstProject);

原链接

效果：