React Native 之 react-navigation（堆栈导航器） 的使用

        作应用确定不可能就一个界面，因此这里涉及到咱们界面跳转的问题，那RN是怎么利用导航器来实现跳转的呢？咱们结合官网给出的例子进行分析，后面笔者发现其实RN的某些思路其实跟Android大同小异，若是你对Android的启动模式有了解还有Android的栈的理解，我相信理解这个应该不会很复杂 D）

        首先若是想用react-navigation就要先安装它，react-navigation在React Native项目中安装。因此咱们须要cmd指令进入项目文件夹以后进行以下命令：

        npm install --save react-navigation 下载react-navigation

        接下来，安装react-native-gesture-handler

        npm install --save react-native-gesture-handler

        连接全部本机依赖项

        react-native link react-native-gesture-handler

        ios的同窗就不须要这么作了……

        要完成针对Android的react-native-gesture-handler的安装，请务必对如下内容进行必要的修改MainActivity.java：

        

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "NavigationDemo";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

到此就能够安心的使用react-navigation了，本人以前没有这样的步骤去作，因此出现了几回问题，切记必定要按照这样的步骤去安装！

范例解析：

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
    );
    }
}

class DetailsScreen extends React.Component {
    render() {
        return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Details Screen</Text>
                        <Button
                            title="Go to Details"
                            //这里的push至关于跳转的时候无论当前栈里有没有该实例都会从新建立一个新的
                            onPress={() => this.props.navigation.push('Details')}
                            />
                  </View>
    );
    }
}

const RootStack = createStackNavigator(
        {
            Home: HomeScreen,
            Details: DetailsScreen,
        },
        {
            initialRouteName: 'Home',
        }
        );

        const AppContainer = createAppContainer(RootStack);

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

这里先贴出来代码范例

其实有点基础的不难看出来，程序的入口是在App而且返回渲染了AppContainer的对象，而且这个对象经过createAppContainer返回StackNavigation，对于createAppContainer这个方法网上没有太多的资料，打开源码解释以下：

Create an app container to wrap the root navigator

建立一个应用程序容器来包装根导航器

字面上的理解比较容易就是建立一个容器来承载StackNavigation导航器，那这个导航器是什么？

代码里面分两个部分，第一个部分是包含全部界面的组件集合，另外一个部分是声明咱们初始化的界面组件是哪个，看到这里咱们应该知道了，范例中咱们声明了两个界面组件，Home 和 Details ，而且声明初始化的路由名字是Home，因此打开界面的首先会进入Home界面，其实这有点像注册路由同样，咱们要把设计到的界面组件注册到路由里面，这样咱们才会navigation的时候才会找获得它。

该范例运行结果以下：

咱们看到当前的界面确实是Home Screen，而且点击按钮会打开Details界面，返回箭头会直接返回Home，这只是一个简单的跳转逻辑，咱们须要作一些更改，怎么改呢？咱们能够尝试一下在Details Screen里面再放入一下Button，细心地朋友看到了上面代码中咱们已经加入了，而且跳转的时候咱们仍是跳转到当前而且是push的，效果会怎么样呢，我已经给了注释，结果倒是会从新打开这个Derails界面，此时的栈中就两个Details实例了，这是否是跟Android的启动模式类似呢，安卓默认的启动模式standard就是这样的效果，可是若是咱们不用push，仍是navigation的话，结局是什么样呢？结果就是没有任何反应，那Android的启动模式能够作到相似的效果，惟一的不一样点就是Android会走特定的生命周期方法。

goBack

堆栈导航器提供的标题将在能够从活动屏幕返回时自动包含后退按钮（若是导航堆栈中只有一个屏幕，则没有任何内容能够返回，所以没有返回键）。

有的时候咱们但愿可以主动触发此行为，咱们就可使用this.props.navigation.goBack();。

class DetailsScreen extends React.Component {
    render() {
        return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
                title="Go to Details... again"
        onPress={() => this.props.navigation.push('Details')}
        />
        <Button
                title="Go to Home"
        onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
                title="Go back"
        onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
    }
}

这里面咱们发现回到Home咱们是直接navigation的，看看效果是否是跟Android的启动模式SingleTask很相似呢，对，就是这样，那咱们也能够另一种方式也能够达到这个效果navigation.popToTop()。

传递参数

 导航跳转咱们搞定了，接下来咱们要传递参数，界面与界面之间传递参数是必不可少的操做。

传递参数是在咱们navigation的时候多加一个参数便可，this.props.navigation.navigate('routeName',{key:value})，格式就是这样，咱们看一下代码：

这里咱们只是传递了两个参数itemId和otherParam，那在DetailsScreen咱们怎么去接收呢，代码以下：

其实方式很简单，跟map的操做方式很像。

若是你想经过道具直接访问params（例如。this.props.itemId）而不是this.props.navigation.getParam，那么你可使用社区开发的react-navigation-props-mapper包。

配置标题栏

如今看咱们的界面是否是很枯燥无味，导航栏上面什么也没有，这个时候咱们能够添加咱们本身的界面标题。

这个时候咱们须要使用到navigationOptions这个属性来配置标题显示。

如上图所示的配置便可，而后运行咱们会发现标题有了：

createStackNavigator 默认状况下使用平台约定，所以在iOS上标题将居中，而在Android上它将是左对齐的。

Over 待续……