react native中关于使用react的PropTypes报错的问题

Z时代
2024-01-10
分类：综合

react

前言：进行项目中又一个弹窗选择的功能，自己琢磨了一些，感觉自己写比较麻烦，所有准备集成一个第三方库，并选中了react-native-modal-picker 这个库。但是我在集成之后写demo的时候，发现老是报 PropTypes 的错误。错误如下：

项目中使用的 react 和 react-native 的版本：

错误原因：

经过查找原因后我发现，我集成的 react-native-modal-picker 中使用了从react中引入的 PropTypes；即使用的是 React.PropTypes 来进行属性确认；但在我查看 react 官方文档后发现：PropTypes 自 React v15.5 起就被移除了，转而使用prop-types 这个三方库来进行替换。

错误文件位置：

属性确认的作用：

使用 React Native 创建的组件是可以复用的，所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉，常常会忘记使用某些属性，或者某些属性传递的数据类型有误。因此我们可以在开发 React Native 自定义组件时，可以通过属性确认来声明这个组件需要哪些属性，并提示传入的属性数据类型使用正确。

注意：为了保证 React Native 代码高效运行，属性确认仅在开发环境中有效，正式发布的 App 运行时是不会进行检查的。

prop-types 库使用：

1. 安装：

yarn add prop-types （ npm install --save prop-types）

2. 在需要使用 react 的 PropTypes属性的地方引入即可：

import PropTypes from 'prop-types';

===>>> 我这里需要在react-native-modal-picker这个库的 index.js 中引入 — node_modules中；

另外，记得注销从react中引入的PropTypes

项目中使用react-native-modal-picker报错：

点击弹出选择框时，报错：

解决：

在react-native-modal-picker这个库的 index.js 中使用了 ScrollView 组件的 keyboardShouldPersistTaps属性，它使用的属性值是true，但这个值已经过去，需要用 ‘always’ 代替。