react-native 使用 StackNavigator 导航器跳转页面

弄了一天，终于跑起来了，可以说历经千辛万险！
最好的教程是React Navigation的官网：https://reactnavigation.org/

StackNavigator 的原理：StackNavigator 是一个移动的“卡片堆栈”，每一个新屏幕都放在堆栈的顶部，删除一个屏幕是将它从堆栈的顶部移出。

以window平台的android环境为例（react-native 版本是0.5），新建一个SimpleApp的react-native项目，导入 react-navigation

# 创建一个新的 React Native 应用react-native init SimpleAppcd SimpleApp# 从npm安装最新版本的react-navigationnpm install --save react-navigation# 这一步可以忽略，在window平台上，npm安装新的模块，下面运行项目的run-abdroid会失效，通过npm install刷新下npm install# 运行android环境react-native run-android

等待几分钟项目初始化后，导进vscode，将App.js文件清空

• 导入组件

import React from 'react';import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native';import { StackNavigator } from 'react-navigation';

• 加入两个屏幕HomeScreen 和ChatScreen

//ChatScreen 屏幕class ChatScreen extends React.Component {  // 导航栏的选项可以被定义为屏幕属性的函数  static navigationOptions = ({ navigation }) => ({    //${navigation.state.params.user} 是一个动态的参数，参数名为user    title: `Chat with ${navigation.state.params.user}`,  });  render() {    //屏幕当前的路由通过屏幕属性的状态传递    const { params } = this.props.navigation.state;    return (      <View>       //params 是参数的意思，params.user表示参数user的值        <Text>Chat with {params.user}</Text>      </View>    );  }}//HomeScreen 屏幕class HomeScreen extends React.Component { //导航栏写成固定的Welcome  static navigationOptions = {    title: 'Welcome',  };  render() {    const { navigate } = this.props.navigation;    return (      <View>        <Text>Hello, Chat App!</Text>        //定义按钮组件，增加点击事件，把user: 'Lucy'传给Chat导航栏        <Button          onPress={() => navigate('Chat', { user: 'Lucy' })}          title="Chat with Lucy"        />      </View>    );  }}

• 定义StackNavigator 的屏幕，添加一下代码

export const SimpleApp = StackNavigator({  Home: { screen: HomeScreen },  Chat: { screen: ChatScreen },});

• 最后不要忘了导出react组件

export default class App extends React.Component {  render() {    return <SimpleApp />;  }}

• 如果一切顺利，效果如下

就这么简单，20分钟都不用。可是我弄了一天，踩了很多坑

• react-native版本和文档版本不一致，这是我的react-native

这是react-native中文网文档的版本，我当时没在意，一直用0.37， 错了好久，一定要选版本一致的

• react-native中文网导航器的demo代码有问题，就算我的代码全copy的，还是中国红的一片，报错的忘了，没截图

• 执行完npm install –save react-navigation后，react-native run-android时，报错

Command 'run-android' unrecognized. Make sure...

解决办法是关掉cmd窗口，再打开，cd到项目目录下，npm install 一遍，就可以react-native run-android

• export default class App extends React.Component {} 这里要加 export default，因为App.js 是被index.js 多引用的，一定要export 出去，官网的教程是没加export default 的

其它的坑忘了截图，总之，运行成功一次来之不易，下班！