React-Navigation(一)，参照官网用法记录

附上官网的文档：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