此篇教程会持续更新。。。
调试环境
为了能够让阅读者容易上手，我先将简单的代码附上，阅读者拷贝到自己的代码看看效果，然后再看我的教程一点点深入了解createStackNavigator，达到灵活运用。
演示步骤
1）首先使用终端切换到项目所在目录下，输入：npm install --save react-navigation，等待安装成功，一般学习到这里自己的电脑上肯定已经安装好了npm，这个在安装node的时候会默认安装；
2）下面这个是配置路由的页面，你将这个页面放在单独的组件中，这个组件不能含有其他组件，我取名叫Main.js:
import {createStackNavigator} from 'react-navigation';
import Test01 from './Test01';
import Test02 from './Test02';
const App = createStackNavigator({
Test01:{
screen:Test01,
navigationOptions:({navigation})=>({
title:'这是Test01的标题'
})
},
Test02:{
screen:Test02,
navigationOptions:({navigation})=>({
title:'这是Test02的标题'
})
}
},{
initialRouteName:'Test01'
});
module.exports = App;
记住导入的那两个文件必须与这个文件在同一目录，如果不在需要自己修改上面的路径（假如，你还不知道怎么导入的话，一般学到这里都了解了，你就按照我的要求放在同一个文件夹中，同时希望你能去看相关的教程来提高自己）；
3）新建文件名称为：Test01.js：
import React,{Component} from 'react';
import {Button} from 'react-native';
export default class Test01 extends Component{
render(){
return (
<Button onPress={()=>this.props.navigation.navigate('Test02')} title={'跳转到test02页面'} />
);
}
}
4）新建文件名称：Test02.js：
import React,{Component} from 'react';
import {Text} from 'react-native';
export default class Test01 extends Component{
render(){
return (
<Text>这是test02页面</Text>
);
}
}
这样就完成工作了，接下来看看效果：
刚进来的页面
当我点击按钮“跳转到test02页面”以后，会跳转到下面这个页面：
跳转以后的页面
这样就实现了页面跳转。下面就说说代码里面的东西，对应效果。
细节说明
1）在Main.js代码中，像import {createStackNavigator} from 'react-navigation';这行代码是导入createStackNavigator，而这个是属于react-navigation库中的,这个库中还封装了标签导航（也就是qq、微信下面的那种），抽屉导航（qq右滑的那个效果），这些我都会在以后的博客中更新；
2）import Test01 from './Test01';import Test02 from './Test02';这个是包含需要跳转的页面，我这里有两个页面，一个是Test01，另一个是Test02；
3）createStackNavigator函数，这个就是设置栈式导航路由的，函数原型：createStackNavigator(RouteConfigs, StackNavigatorConfig);这个函数有两个参数，第一个是路由配置，是一个对象，里面的键值对就是一个个路由，就是需要跳转的页面，其中键的值是路由名称，也就是页面的名称，这个名称可以跟创建的类名不同（我只是习惯弄成一样的），想想在js中的类，其中键的值可以自己随便取；值的值是一个对象，
对象里面第一个属性是screen，这个的值必须与上面导入的值相同；
第二个参数是path，这个我一直没用到过；
第三个参数是navigationOptions，这个属性主要是设置导航栏的，比如说导航栏的背景颜色，返回按钮等等，具体的参数官网都有介绍，可返回到上面点击链接跳转到官网进行查看，我说几个常见的属性，一般导航栏的标题需要设置，使用title，这个属性接受一个字符串；header，使用这个属性主要是当我们不需要导航栏的时候，这个时候需要将其设置为null，形如：header:null；headerBackImage这个属性是自定义返回按钮的图片，这个属性在安卓与苹果上默认效果不同，一般都要自定义，这个属性接受一个像<Image/>这样的组件，官方提供一个回调函数，只要最后返回值是像<View>这样的就行，回调函数参数是一个对象，常用的属性是tintColor，这个属性你用了就知道什么意思了，我不知道怎么描述，官方解释的是：Color of the currently selected tab icon，反正我像下面设置以后就变成了浅蓝色：<Image source={require('../res/left.png')} style={{width:30,height:30,tintColor:tintColor}} />；headerBackTitle这个属性是返回文本，接受一个字符串或者null，当是null的时候没有返回文本；
4）createStackNavigator函数的第二个参数StackNavigatorConfig，这个我在使用中一般只使用initialRouteName这个属性，这个属性的意思就是默认路由，也就是刚进去的时候显示的是哪一个页面，一般不设置这个属性的话，默认是第一参数的第一个路由作为第一个页面，否则按照这儿设置的；
5）把createStackNavigator函数设置完成以后，将这个函数的返回值导出，使用module.exports这种方式导出和使用export default的方式导出都没有问题；
6）在需要跳转的地方，书写代码this.props.navigation.navigate("这里填设置时写的路由名称，也就是键的值")（就像Test01这个页面里面按钮触发事件一样），而无需再一次导入createStackNavigator，在被设置到栈式导航里面的所有页面，里面都有一个静态的navigationOptions对象，跟设置createStackNavigator函数的第一个参数里面的navigationOptions是一样的，也就是说，你可以将这个参数写到每一个页面里面，也可以写在配置路由的地方，在页面中具体怎么写，我把代码写到Test01.js里面，看下面；
import React,{Component} from 'react';
import {Button} from 'react-native';
export default class Test01 extends Component{
static navigationOptions = {
title:'这是第一个页面'
}
render(){
return (
<Button onPress={()=>this.props.navigation.navigate('Test02')} title={'跳转到test02页面'} />
);
}
}
一般我们使用栈式导航createStackNavigator主要是为了实现页面跳转，如果我们再将常用navigationOptions放到每一个页面里面，那么可以说createStackNavigator里面就只有配置路由名称这个工作，但这个工作我们却需要写上面那么多对象，显然是不好的，官方也考虑到了，配置路由的简写形式：
createStackNavigator({
Test01:Test01,
Test02:Test02
},{
initialRouteName:'Test01'
});
这样就搞定了，是不是很简单，如果你想深入了解栈式导航，那么需要阅读react-navigation生命周期和react-native实现页面跳转createStackNavigator（精华篇）（以后更新），一般入门篇的知识就已经能够满足我们大部分开发。
网友评论