React-Navigation 初识导航器

文档属于翻译官网英文 文档。想要看原文，请https://reactnavigation.org/docs/intro/

# 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 (
      
        Hello, Chat App!代码控制台
         navigate('Chat')}
          title="Go Chat"
        />
      
    );
  }
}
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 (
      
        Chat with Lucy
      
    );
  }
}

插入数据线，打开cmd命令进入应用所在根目录。
运行命令：
react-native run-android
等在手机安装完毕后，就可以看见运行结果了。

#4 .传递参数

场景：头部导航组件样式都一样，文字内容不一样，应该怎么实现。
要实现导航器之间的传递参数就应该在上一级页面导航器中定义 一个参数，然后在子页面或者下级页面接收完成传递。

1.我们更改index.android.js中的Button

 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 (
      
        Chat with {params.user}
      
    );
  }

#5 .扩展阅读：

props（属性）
http://reactnative.cn/docs/0.47/props.html#content

state(状态)
http://reactnative.cn/docs/0.47/state.html#content