附上官网的文档：https://reactnavigation.org/docs/intro/
使用注意！所有被navigation包含的页面，一定要先注册再使用！先注册再使用！先注册再使用！
跟原生的指哪打哪不同，需要将所有需要页面以及即将要跳转的页面注册一遍。
一、使用前npm一下react-navigation
npm install --save react-navigation
二、最普通的导航栏使用：
1、新建一个js文件，暂且叫app吧，官网示例代码如下：
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
//这里官网直接在同一个文件里新建了一个页面，用的时候可以抽取出来
class HomeScreen extends React.Component {
static navigationOptions = { //在这设置导航栏的标题
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
//注意这里的'SimpleApp'要替换成自己项目的名字，才算真正的注册
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
2、然后将两个主入口文件index.ios.js和index.android.js中的内容删除，只导入刚刚编辑的文件，就这一句～～
import App from './Component/Main/app';
这样就能在iOS和android模拟器上都看到界面啦～
屏幕快照 2017-08-19 上午10.51.25.png
三、跳转到一个新的页面
navigation的跳转和原生的iOS开发不一样，要跳转的页面都要先进行注册，iOS则是指哪打哪～
还是在刚刚的app文件里直接添加一个新页面，为了有对比，还是贴整段代码：
import React from 'react';
import {
AppRegistry,
Text,
Button, //注意导入
View, //注意导入
} from 'react-native';
import { StackNavigator } from 'react-navigation';
//这里官网直接在同一个文件里新建了一个页面，用的时候可以抽取出来
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome', //在这设置导航栏的标题
};
render() {
const { navigate } = this.props.navigation; //由于注册过了，所以可以直接拿到
return(
//新加一个按钮用来跳转,注意头部导入下 'Button'组件 和 'View'组件
//只能返回一个根组件，所以要多添加一个按钮组件的时候，用一个View包起来
<View>
<Text>Hello, Navigation!</Text>
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}//在前面引用进navigate，指定要跳转的页面，
title="Chat with Lucy"
/>
</View>
);
}
}
//新加的页面
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
//注册页面，一定要先注册,创建的页面，要写在这个注册的方法前
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen }, //Home就是注册页面的名字，后面用这个名字来拿到这个页面
Chat: { screen: ChatScreen }, //再注册一个要跳转的页面，叫Chat
});
//注意这里的'SimpleApp'要替换成自己项目的名字,比如我的项目叫simple，才算真正的注册
AppRegistry.registerComponent('simple', () => SimpleApp)
这样就能愉快的跳转了：（这里就用官网的图啦）
first-navigation-android.png
first-navigation-iphone.png
四、页面间传值
注意前面在button组件的点击响应事件方法里是这样的写的
onPress={() => navigate('Chat', { user: 'Lucy' })}//在前面
这里的'Chat'是指定要跳转的页面(一定要先注册过！) ，再后面跟的参数，就是传递的值啦。 然后就是在刚刚构建的Chat页面里拿到这个值：
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state; //因为注册过了，所以可以在props里拿到navigation，刚刚传递下来的user，就在他的state里
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
first-navigation-android (1).png
first-navigation-iphone (1).png
