例:
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);
原链接
效果: