React Native 报错: unddefined is not an object（evaluating ‘_reactnative.propTypes)

墨蓝 2022-05-15 02:05 236阅读 0赞

### 前言 ###

公司项目 ReactNative 版本比较旧,因此想要升级。  
升级版本为 : 0.41.1->0.55.4 。  
升级过程中遇到了一个问题。  
React Native报错 unddefined is not an object（evaluating ‘\_reactnative.propTypes’）。

--------------------

### 错误原因 ###

在给 React 16 中有一个大的改变，PropTypes的代码从React中分离出来了，放在一个独立的 npm包 prop-types里。  
也就是说,之前的这种写法已经不能再使用了。  
之前的 :

import { PropTypes } from 'react'

需要改变为 :

import PropTypes from 'prop-types'

当然,有的人会说,如果是第三库直接升级第三库就可以了。有两个问题 :  
1. 有的第三方库已经不再维护了。  
2. 你能保证新版库没有什么坑爹的 Bug 吗 ? 大量的第三方库一次性升级,非常的不稳定。

--------------------

### 问题 ###

如果你的项目比较大,不仅自己的类使用到了 PropTypes , 你依赖的第三方库也使用到了 PropTypes 。该怎么办呢 ?  
比如 : 第三库 react-native-view-transformer :

import React from 'react';
    ......
    
    ViewTransformer.propTypes = { enableTransform: React.PropTypes.bool, enableScale: React.PropTypes.bool, enableTranslate: React.PropTypes.bool, maxOverScrollDistance: React.PropTypes.number, maxScale: React.PropTypes.number, contentAspectRatio: React.PropTypes.number, enableResistance: React.PropTypes.bool, onViewTransformed: React.PropTypes.func, onTransformGestureReleased: React.PropTypes.func };

当然你可以一个个手动去改,但是依赖库那么多,如果一个个改的话,估计人都要累死了。

--------------------

### 解决方法 ###

如果类都是自己写的话,直接全局查找 PropTypes 即可。  
而第三方库都在 node\_modules 文件夹内 , 如果想要排查第三方的 PropTypes ,可以使用以下 Unix 命令 ,找出所有使用到 PropTypes 的库:  
在 node\_modules 的父目录执行下列命令。

find ./node_modules -type f -print0 | xargs -0 grep 'PropTypes' | cut -d/ -f3 | sort | uniq | xargs -I{} grep -L 'prop-types' ./node_modules/{}/package.json

windows 可以使用 Git Bash 调用上方命令。调用结果 :

![这里写图片描述][70]

我们看到这些第三方库使用到了 PropTypes 。 有没有什么简单的方法,一次性改掉这些文件的 PropTypes 呢 ?

使用 react-codemod 来重构 JavaScript 代码 。

库地址 : [https://github.com/reactjs/react-codemod][https_github.com_reactjs_react-codemod] 。

使用方法 : (来自 react-codemod 的 [issue ][issue] )  
1. npm install -g jscodeshift  
2. git clone [https://github.com/reactjs/react-codemod.git][https_github.com_reactjs_react-codemod.git]  
3. cd react-codemod  
4. npm install (我执行这一步的时候报错了,不过我直接忽略了…)  
5. 切换到你想要转换的目录,执行下列命令 :

jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>

第五步,我给大家举个例子 :

以我上方的需要转换的文件为例 ,我要改动 react-native-view-transformer 文件夹下所有的类,你可以执行。

jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js    node_modules/react-native-view-transformer

文件路径大家注意写正确哦 ! 不要直接复制粘贴。  
执行结果显示如下 :  
![这里写图片描述][70 1]

意思是有1个文件转换成功了。

--------------------

### 总结 ###

升级版本的过程中,大家不免将很多代码迁移到下一代 JavaScript。

react-codemod 有很多解决方法 ,大家可以参考下 :

![这里写图片描述][70 2]

facebook 官方也有个库 [https://github.com/facebook/jscodeshift][https_github.com_facebook_jscodeshift] 。

最后 :  
鉴于 RN 在Android 平台上糟糕的性能表现。如果你没入坑,千万不要跳进来。讲道理,修复那些 RN Bug 的时间足够我重新用原生写 Android 和 Ios 的代码。

[70]: /images/20220515/07c3c119ffcb4321aeeceae542c49e77.png
[https_github.com_reactjs_react-codemod]: https://github.com/reactjs/react-codemod
[issue]: https://github.com/reactjs/react-codemod/issues/137
[https_github.com_reactjs_react-codemod.git]: https://github.com/reactjs/react-codemod.git
[70 1]: /images/20220515/f09b0d41843943a08702c0cad669a088.png
[70 2]: /images/20220515/e4adac8095c14dd5b0e9f1c8c0bc84a7.png
[https_github.com_facebook_jscodeshift]: https://github.com/facebook/jscodeshift