react-navigation3.x报错null is not an object (evaluating 'RNGesturehandleNavigator.

目的(提示:我的错误是null is not an object 不是undefined is not an object

我想让app切换页面,但是无论如何就是不能使用react-navigation3.3.2,总是出现各种错误,让我们一起看看我都报过社么错。

这部分错误示范,可以跳过去不看

一开始直接引入react-navigation,报错说:null is not an object (evaluating
‘StackNavigator’);
于是各种搜索:开始安装react-navigation和react-native-gesture-handle,以及react
link,然而并没有什么卵用,开始报错:null is not an object (evaluating
‘RNGesturehandleNavigator.’);
意思说我没有安装react-native-gesture-handle模块,这很折磨人,刚刚明明安装并且link了。
我不服就再次安装,这次发现原来使用npm安装过程中出现: 有11个漏洞未修复,建议使用npm aduit fix 命令去修复这样的语句,于是我npm aduit fix
,并卵,网上说,可以卸载package-lock.json还是yarn.lock忘记了,意思两个包管理软件有冲突,然并卵。
于是搜索,发现可以修改MainApplication.java中的内容,是什么+import …+import…好几行绿色的内容,加完之后依然报错,null is not an object (evaluating
‘RNGesturehandleNavigator.’) 。
没有办法,就反复安装react-navigation和react-native-gesture-handle,发现安装虽然没有报错,但是中间会有白色字体的warning,意思是这两个模块缺少的依赖包,记得好像有:react-web,react-cli社么的,于是我全部安装了这些依赖包,而且在package.json中也可以看到依赖包安装成功,依然报错,null is not an object (evaluating ‘RNGesturehandleNavigator.’) 。

看这里,这部分解决了错误

1, 就删除所有的项目,并且删除了yarn ,
2,新建文件夹:react-native,在目录下初始化一个项目:react-native init ee
3,安装react-navigation: npm install --save react-navigation
4,安装react-native-gesture-handle : npm install --save react-native-gesture-handler
5,连接到原生库:react link
6,删除yarn.lock
7,启动服务器:react-native start
8,下载到手机端:react-native run-android
报错:
报错信息
9,一定,一定不要忽视任何错误,在这里,他说:E:\react-native\ee\android\settings.gradle中不希望出现反斜杠,你应该找到这个文件夹,把反斜杠改成正斜杠/。
10,试探使用react-navigation:

     在index.android.js中:
import {AppRegistry} from 'react-native';
import App form  './App';
import  {name as appName} from './app.json';
AppRegistry.registerComponent{appName,()=> App
   

 


     在App.js中:
 import {createStackNavigator,createAppContainer} from 'react-navigation';
 import App1 from './App1';
 const  AppStackNavigator= createStackNigator({
      App1: {
              screen :   App1
              }
      });
  export  default  createAppContainer(AppStackNavigator);
       

     在App1.js中:
 import  React, {Component } from  'react';
 impor   {StyleSheet, View,  Text } from 'react-native';
 export default  class App extends Component {
 render(){
         return (
         <View>
               <Text> Hello  World !</Text>
          </View>
          )
        }
        }

OK了,没有再出现讨厌的RNGestureHandle

后来经过多轮测试,发现只要安装新的包,比如(react-navigation, react-native-vector-icons, react-native-storage),必须重新在手机端下载apk,运行run-android。可能是由于移动端本地的bundle文件没有新安装包的信息。

其他的小错误:
一般服务器返回 :the development server returned response error code:500 就是说明,未从服务器中找到想要的资源,返回值500. 也就是说你js文件中引入的文件并不存在。

使用react-native-vetor-icons.59 出现的错误:
一开始按部就班的npm install , link 以及添加import Entypo from ‘react-native-vector-icons/Entypo’; 以及在第二个参数中设置:
tabBarOptions:{ showIcons: true, } , 并且根据网又的提示,修改build.gradle,修改MainApplication.java等。没有用。
然后再次安装:npm install --save react-native-vetor-icons 和以前一样说有11个漏洞,虽然以前使用npm aduit fix没什么用,但是今天决定一试,然后居然修复好了,再次link,不同于以往的回复是rnpm info …这次是

在这里插入图片描述
于是我再次start项目,并reload,终于报错了,但是却说我的版本react-native version mismatch , js version:0.59.0,native version: 0.58.6 意思react-native 需要更新版本(2019/3/13/21点,可能就是一瞬间发布新版本),我在项目根目录进行,react-natvie upgrade, 被提示跟新到0.59.0了,然而到手机端各种刷新任然说我版本不匹配,没办法只好重新init一个项目。
和以前步骤一样照例修改index.js为index.android.js,下载react-navigaiton等,然后link icons的时候:在这里插入图片描述
就把相应文件夹中的内容复制过去了。
一通操作,按照原先的套路又走了一遍,能够使用小icon了??
所以我这次出错是因为版本太旧,刚好更新了?世界好奇妙。

猜你喜欢

转载自blog.csdn.net/kalinux/article/details/88371820
今日推荐