文档属于翻译官网英文 文档。想要看原文，请https://reactnavigation.org/docs/intro/
[TOC]
### # **1. 安装**
**NPM下安装**
`npm install --save react-navigation`
**Yarn安装**
`yarn add react-navigation`
以下是nmp下创建一个项目，并且安装启动手机调试：
~~~
# Create a new React Native App
react-native init SimpleApp
cd SimpleApp
# Install the latest version of react-navigation from npm
npm install --save react-navigation
# Run the new app
react-native run-android # or:
react-native run-ios
~~~
当安装启动成功后。
页面会显示：`welcome react-native`
> 在当前目录下，创建app.js。并且用import './App';. 来导入它。同时将index.ios.js和 index.android.js里面的内容清除掉。显示内容放在app.js
> 这样就可以显示一个只有导入，导出的一个清爽首页了。
* * * * *
### # **2. 引入堆栈导航器**
迫不及待的想要体验堆栈导航器了吧，何不现在我们就开始！
1.在跟index.android.js同目录下创建app.js
2.在index.android.js中代码如下：
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { ChatScreen,HelloScreen } from './app';
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!代码控制台</Text>
<Button
onPress={() => navigate('Chat')}
title="Go Chat"
/>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('tang', () => SimpleApp);
~~~
### # **3.app.js页面代码如下：**
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
export class ChatScreen extends Component {
static navigationOptions = {
title: 'Chat',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
~~~
插入数据线，打开cmd命令进入应用所在根目录。
运行命令：
`react-native run-android`
等在手机安装完毕后，就可以看见运行结果了。
### #**4 .传递参数**
场景：头部导航组件样式都一样，文字内容不一样，应该怎么实现。
要实现导航器之间的传递参数就应该在上一级页面导航器中定义 一个参数，然后在子页面或者下级页面接收完成传递。
1.我们更改index.android.js中的Button
~~~
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
~~~
通过navigate中传递一个数组来实现传值。
2.app.js中获取传值。
~~~
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
~~~
### #**5 .扩展阅读：**
props（属性）
http://reactnative.cn/docs/0.47/props.html#content
state(状态)
http://reactnative.cn/docs/0.47/state.html#content
