漫长的react-native中React Navigation 的使用配置摸索

漫长的react-native中React Navigation 的使用方法摸索

小编刚开始研究RN，第一步导航的页面就阻碍了小编前进的步伐，
在网上随便找了一个相关的代码copy进了项目中
app.js中代码如下

import React, {Component} from 'react';
import {
    StackNavigator,
} from 'react-navigation';

import Index from './src/index/index';
import Search from './src/search/search';

/* * 初始化StackNavigator*/

export default Navi = StackNavigator({
    Index: {
        screen: Index,
    },
    Default: {
        screen: Index,
    },

});

但是模拟器中却报红

发现这些版本已过时，需要最新版本
查阅react-navigation官网https://reactnavigation.org/docs/en/getting-started.html
发现要先装expo-cli

不知道为啥，先装再说
安装过程比较慢
慢且不说，还失败了

百度一搜，发现这个错误产生的原因是上面的npm i -g expo-cli 应该在管理员身份的cmd中运行。于是cd 到项目目录，再试一次，又是漫长的等待，这里真的很漫长

安装成功
接下来安装流程在当前目录下就行执行expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens 这里比较快

接下来执行npm run postinstall
发现 postinstall 没有安装
按照https://www.npmjs.com/package/postinstall 安装，并在package.json文件中配置完成
记得在项目目录中创建\jquery\dist文件夹，并装入

这两文件，自行去jquey官网下载
再执行一次npm run postinstall（注意是在管理员运行的cmd中执行）
执行成功
接着按照官网指示

在MainActivity.java中进行配置添加，此文件夹在项目目录的android\app\src\main\java\com\自己项目名称\下
接着在需要引入react navagation 的js文件中添加
import ‘react-native-gesture-handler’

然后在回到项目中执行react-native run-android

不出所料，发现还是出错。。。

首先发现

按照https://www.jianshu.com/p/47670cd30134的方法，在android studio 中去掉相关的勾选
再试试，发现没用
再找到https://blog.csdn.net/u014649598/article/details/91437130，按照第一种方法替换项目根目录下build.gradle中的jcenter()，我是在android studio 中在Gradle script 中的build.gradle中修改的，然后在android studio中run 一次
发现出现了这样的错误
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:generateDebugBuildConfig
发现是在android\app\build\generated\source\buildConfig\debug文件中少了com 文件夹，创建一个即可
再run 发现正常了
回到reactnative中继续重新跑一遍react-native run-android
终于终于成功了

流出了幸福的老母亲的眼泪o(╥﹏╥)o
然后模拟器界面又回到了

不急不急。继续按照https://reactnavigation.org/docs/en/hello-react-navigation.html官网的hello react navigation案例改代码
改完后发现如下报错

目测是node服务需要开启，在项目目录下，执行npm start
发现模拟器页面变了
变成了

正愁找不到解决的方法，点了一下reload ,页面又发生了变化，好吧。。

好吧，我没安装这个插件，安装npm install react-navigation-stack --save
安装完再跑了一遍react-native run-android
还是成功启动

我要的页面终于。。。终于。。。出来了，哭了。。。
好了
然后按照官网https://reactnavigation.org/docs/en/hello-react-navigation.html的使用方法就可以愉快的使用起来了