createStackNavigator 包含createBottomTabNavigator 例子
先把版本给和项目文件给大家看下，为后面说跳转文件做铺垫。以及两个组件
“react-native-vector-icons” ：“^ 4.6.0” ， “react-navigation” ：“^ 2.0.0”第一个是图片的组件，第二个是导航的组件，图片组件可有可无，有的话就不用自己导入到处找图片了
先是从index.js入口说起
import { AppRegistry } from 'react-native'; import Root from './js/root' //下面两行是屏蔽警告 console.disableYellowBox = true console.warn('YellowBox is disabled.') AppRegistry.registerComponent('A', () => Root);
直接到root.js文件
import React, {Component} from 'react'; import {createStackNavigator} from 'react-navigation' import Tab from './scene/Web/ButtomTab' import login from './scene/login' import Positioning from "./scene/Home/Positioning"; import Jump from "./scene/Home/Jump"; type Props = {}; export default class root extends Component<Props> { render() { return ( <HomeStack/> ); } } const HomeStack = createStackNavigator({ //底部导航页面 Homes: { screen: Tab, navigationOptions: { header: null //顶部导航很多都会自己自定义，这里就为空 } }, //登录页面 login: { screen: login, }, //定位 Positioning: { screen: Positioning, navigationOptions: { header: null //顶部导航很多都会自己自定义，这里就为空 } }, //测试跳页的页面 Jump: { screen: Jump, navigationOptions: { title: '选择定位' } } }, { //默认出现的首页页面 initialRouteName: 'Homes' });
代码中有注释，代表的意思，进入到根后到createStackNavigator，默认输出的家园中到选项卡的底部标签，跳转接着到
接着上标签里出现到createButtomNavigator导航到代码
import React, {Component} from 'react'; import { StyleSheet, Dimensions, Platform } from 'react-native'; import color from './Color' //颜色样式 import Memo from "../Memo/Memo"; import Ionicons from 'react-native-vector-icons/Ionicons' import Statistics from "../Statistics/Statistics"; import {createBottomTabNavigator} from "react-navigation"; import Home from "../Home/Home"; import My from "../My/My" export default Tab = createBottomTabNavigator({ Home: { screen: Home, navigationOptions: { tabBarPosition: 'bottom', tabBarLabel: '首页', showLabel:false, tabBarIcon: ({tintColor, focused}) => ( <Ionicons name={focused ? 'ios-home' : 'ios-home-outline'} size={26} style={{color: tintColor}} /> ), } }, Memorandum: { screen: Memo, navigationOptions: { tabBarPosition: 'bottom', tabBarLabel: '备忘', tabBarIcon: ({tintColor, focused}) => ( <Ionicons name={focused ? 'ios-paper' : 'ios-paper-outline'} size={26} style={{color: tintColor}} /> ), } }, Statistics: { screen: Statistics, navigationOptions: { tabBarLabel: '统计', tabBarPosition: 'bottom', tabBarIcon: ({tintColor, focused}) => ( <Ionicons name={focused ? 'ios-stats' : 'ios-stats-outline'} size={26} style={{color: tintColor}} /> ), } }, My: { screen: My, navigationOptions: { tabBarLabel: '我的', tabBarPosition: 'bottom', tabBarIcon: ({tintColor, focused}) => ( <Ionicons name={focused ? 'ios-person' : 'ios-person-outline'} size={26} style={{color: tintColor}} /> ), } }, }, { tabBarOptions: { activeTintColor: color.primary, inactiveTintColor: color.gray, }, animationEnabled: true, swipeEnabled: false, //是否可以滑动切换 swipeEnabled: true, //切换是否有动画 animationEnabled: true, //进入App的首页面 initialRouteName: 'Home', //对于导航的设置 tabBarOptions: { //android特有下划线的颜色1 indicatorStyle: {height: 0}, //文字的样式 labelStyle: { fontSize: 10 }, //对于导航的stytles style :{ borderTopColor:'#ebebeb', borderTopWidth:1, backgroundColor:'white', height:Dimensions.get('window').height*0.08, } } });
上面有个导入里颜色到文件，文件内容是下面代码，主要把颜色归类，方便以后改动颜色设置方便
export default { primary: '#1E90FF', //主题样式 选中底部标题和图片的颜色以及顶部标题 border: '#e0e0e0', paper: '#f3f3f3', gray: '#979797', //灰色 未选中底部标题和图片的颜色1 background:'#F5FCFF', white:'#FFFFFF', titleBottonSolid: '#979797', }
由于很多人前面步骤不同，导致后面跳页实现不了，下面是createButtomNavigator中到导航出现到首页页面，下面是首页代码
import React, {Component} from 'react'; import { StyleSheet, Image, View, TouchableOpacity, Dimensions, Text, Platform, Button, } from 'react-native'; import color from '../Web/Color' import Positioning from './Positioning' import Jump from './Jump' type Props = {}; export default class Home extends Component<Props> { constructor(props) { super(props) this.state = { } } render() { const {navigation} = this.props; return ( <View style={styles.container}> <View style={styles.navBar}> <View style={styles.navBarButton}> <TouchableOpacity onPress={() => { navigation.navigate('Positioning') }} > <Text style={styles.leftButtom}>定位</Text> </TouchableOpacity> </View> <View style={styles.navBarTitleContainer}> <Text style={styles.title}>首页</Text> </View> <View style={styles.navBarButton}> <TouchableOpacity> <Text style={styles.rightButtom}>消息</Text> </TouchableOpacity> </View> </View> <Image style={styles.topImg} source={require('../../img/HomeImg/timg.jpeg')} /> <View style={styles.mid}> <TouchableOpacity style={styles.icon} onPress={()=> this.props.navigation.navigate('Jump') } > <Image style={styles.iconImg} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} /> <Text>热门</Text> </TouchableOpacity> </View> </View> ); } } const styles = StyleSheet.create({ container: { // flex: 1, backgroundColor: color.background, }, navBar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: Platform.OS === 'ios' ? 40 : 55, borderBottomWidth: 1, borderStyle: 'solid', borderBottomColor: color.titleBottonSolid, backgroundColor: color.primary, }, navBarTitleContainer: { alignItems: 'center', justifyContent: 'center', position: 'absolute', left: 40, top: 0, right: 40, bottom: 0, }, title: { fontSize: 20, color: color.white, }, leftButtom: { color: color.white, }, rightButtom: { color: color.white, }, navBarButton: { alignItems: 'center', margin: 10 }, topImg: { width: Dimensions.get('window').width, height: 140, }, mid: { flexWrap: 'wrap', flexDirection: 'row', width: Dimensions.get('window').width, backgroundColor: '#fff', }, icon: { justifyContent: 'center', alignItems: 'center', width: Platform.OS === 'ios' ? Dimensions.get('window').width / 4 : Dimensions.get('window').width / 4, }, iconImg: { width: Platform.OS === 'ios' ? Dimensions.get('window').width / 8 : Dimensions.get('window').width / 8, height: Platform.OS === 'ios' ? Dimensions.get('window').width / 8 : Dimensions.get('window').width / 8, borderRadius: Platform.OS === 'ios' ? 15 : 50, marginTop: 6, } });
这个页面中有个本地图片和网络链接图片，要是你本地没有，可以把本地图片的代码删掉。来先看看图把，在IOS的下图是这样的
下面的英文点击热门的要跳页的代码，也就是在root文件中createStackNavigator注释里提到Jump文件，
jump文件代码
import React, {Component} from 'react'; import { Platform, StyleSheet, Text, View, } from 'react-native'; import color from '../Web/Color' type Props = {}; export default class Jump extends Component<Props> { render() { return ( <View > <Text > 当前定位的城市 </Text> </View> ); } }
是不是发现达到了大家想要的createStackNavigator包含底部导航了呢