启动

认识一下index.js文件，代码如下：

import { AppRegistry } from 'react-native'; #从‘react-native’库中引入‘AppRegistry’组件

import App from './App'; #引入‘App.js’文件，并起个别名叫‘App’（这个名字可以随便起）

AppRegistry.registerComponent('HelloWorld', () => App); #注册js入口

AppRegistry负责注册运行RN应用程序的js入口。'HelloWorld'这个是项目名称，不要随便修改哦！可还记得上面文章中：

react-native init HelloWorld

这句代码，你创建工程时候的名字。如果这个对应不上你就会出现以下情况：

相信不少小伙伴都遇见过这个问题吧！

体验跳转

API简介 - StackNavigator

背景介绍：从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为
react-native-deprecated-custom-components的单独模块中。社区今后主推的方案是一个单独的导航库
react-navigation，它的使用十分简单。所以我们使用StackNavigator来进行跳转

先来一波代码

Nav.js源码：

import {StackNavigator} from 'react-navigation'
import Hello from "./Hello";
import World from "./World"

export default NavData = StackNavigator({Hello: {screen: Hello}, World: {screen: World}})

创建一个StackNavigator（有android经验的小伙伴，仔细看看有点Androidmanifest.xml的味道），注册了别称‘Hello’的
Hello.js文件和称‘World’的World.js文件

index.js源码：

import {AppRegistry} from 'react-native';
import App from './src/solide/testNavagation/Nav';

AppRegistry.registerComponent('HelloWorld', () => App); #这里要注意是StackNavigator去注册启动

应用默认启动第一个元素Hello

Hello.js源码：

import React, {Component} from 'react';
import {View, Text} from 'react-native'
import {} from 'react-navigation'

export default class Hello extends Component {
    //设置导航栏标题
    static navigationOptions = {
        title: 'Hello'
    };

    render() {
        const {navigate} = this.props.navigation;

        return <View>
            //设置点击事件
            <Text onPress={() => navigate('World')}>Hello Hello</Text>
        </View>
    }
}

World.js源码就不放了，只有一个view展示。

项目地址

https://github.com/yzj0487/StackNavigator

详细分析一波

如果你是下载的完成项目或者copy的代码，那么相信你已经体验过跳转了。代码只简单的几行，如果你是自己写的，那么
我相信你会遇见不少问题，或者你会问为什么要这样写？
来来小问题走一波：

有木有很兴奋，又是熟悉的红色。标题很清晰，navigate对象找不到，引起原因：

 const {navigate} = this.props.navigation;

就是这行代码引起的，引起的原因大致两种：
1、你没有写这行代码
2、这行代码的作用域没有覆盖到（例如你把click方法定义在外面，那么这行代码也要写在click方法里面，如果你写在
render里面就会报错）

小知识点：这里this.props不知道小伙伴是怎么理解的？今后他会和我们经常见面，这里我对它也不是特别了解，反正它
的作用很多，我们暂且把他理解为——组件的属性


好学的小伙伴，肯定还会有很多问题，我们再简单看个问题，为咩‘static navigationOptions’这么一个静态变量就能设置属性？

回答这个问题我们必须去看看StackNavigator的源码了

StackNavigator.js源码：

export default (routeConfigMap, stackConfig = {}) => {
  const {
    initialRouteKey,
    initialRouteName,
    initialRouteParams,
    paths,
    headerMode,
    headerTransitionPreset,
    mode,
    cardStyle,
    transitionConfig,
    onTransitionStart,
    onTransitionEnd,
    navigationOptions,
  } = stackConfig; //配置信息

  const stackRouterConfig = {
    initialRouteKey,
    initialRouteName,
    initialRouteParams,
    paths,
    navigationOptions,
  };

  const router = StackRouter(routeConfigMap, stackRouterConfig);

  // Create a navigator with CardStackTransitioner as the view
  const navigator = createNavigator(router, routeConfigMap, stackConfig)(
    props => (
      <CardStackTransitioner
        {...props}
        headerMode={headerMode}
        headerTransitionPreset={headerTransitionPreset}
        mode={mode}
        cardStyle={cardStyle}
        transitionConfig={transitionConfig}
        onTransitionStart={onTransitionStart}
        onTransitionEnd={(lastTransition, transition) => {
          const { state, dispatch } = props.navigation;
          dispatch(NavigationActions.completeTransition({ key: state.key }));
          onTransitionEnd && onTransitionEnd(lastTransition, transition);
        }}
      />
    )
  );

  return createNavigationContainer(navigator);
};

查看一下源码是不是豁然开朗了？如果没有，那么我简单说两句，config中直接引用常量属性‘navigationOptions’，
那么你在组件中‘static navigationOptions’就是override这个属性了。

附上官方解释:the options can be a function that takes the following arguments, and returns an object of
navigation options that will be override the route-defined and navigator-defined navigationOptions

文档地址：https://reactnavigation.org/docs/stack-navigator.html