完整代码:
import React from 'react'; import { AppRegistry, Text, View, Button, ScrollView, StyleSheet, Image, } from 'react-native'; import {TabNavigator} from 'react-navigation'; class MyHomeScreen extends React.Component { static navigationOptions = { tabBarLabel: 'Home', // Note: By default the icon is only shown on iOS. Search the showIcon option below. tabBarIcon: () => ( <View> <Image source={require('./img/icon_1.png')} style={styles.icon} /> </View> ), }; render() { return ( <Button // onPress={() => this.props.navigation.navigate('Notifications')} title=" home " /> ); } } class MyNotificationsScreen extends React.Component { render() { return ( <Button // onPress={() => this.props.navigation.goBack()} title="notifications" /> ); } } MyNotificationsScreen.navigationOptions = { //tab标签 tabBarLabel: 'Notifications', tabBarIcon: ({ tintColor }) => ( <Image source={require('./img/icon_1.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; const styles = StyleSheet.create({ icon: { width: 20, height: 20, }, }); const MyFirstProject = TabNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: MyNotificationsScreen, }, }, { tabBarOptions: { activeTintColor: '#e91e63', }, tabBar 显示的位置 ,android 默认是显示在页面顶端的 tabBarPosition: 'top', animationEnabled: false, // 切换页面时是否有动画效果 swipeEnabled: true, // 是否可以左右滑动切换tab 如果设置这个属性,这事例中下面设置的按钮 Go back home | Go to notifications就不好使了 backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转 //第一次加载时,显示的tab initialRouteName : 'Home', tabBarOptions: { activeTintColor: '#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, }, }, }); AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject);
效果图:(说明下,虚拟机上有点卡顿,在真机运行是不卡的)