【技术】ReactNative问题整理

1.前言

现在前端跨平台技术越来越流行了,跨平台框架也是层出不穷,其中ReactNative (FaceBook出品)、Weex (阿里出品)、Flutter (谷歌出品) 作为大厂出品是目前最受欢迎的几大跨平台框架。

最近自己也在研究学习ReactNative,作为一个跨平台框架的新手难免会遇到各种问题,现将遇到的这些问题以及解决方案整理记录一下,方便以后自己以及他人研究参考。

2.常见问题

1、React-Native: Could Not find iPhone 6 Simulator

解决方案：
在执行npm install之后，打开node_modules/react-native/local-cli/runiOS/findMatchingSimulator.js 文件,分别定位到第30、36行,将这两行的代码替换为如下代码：

 //第30行代码替换
 if (!version.includes('iOS')) {
       continue;
   }

 //第36行代码替换
 if (simulator.isAvailable !== true) {
     continue;
  }

2、SectionList "TypeError: Cannot read property 'length' of undefined"

解决方案：
此报错为数据构造的问题，dataSource 数据结构必须如下所示：

 var sections = [
      { key: "分类1", data: [{ title: "数据1" }, { title: "数据1" }, { title: "数据1" }] },
      { key: "分类2", data: [{ title: "数据2" }, { title: "数据2" }, { title: "数据2" }] }, 
    ];

必须以 key ~ data 的键值形式构造数据源。

3、Unrecognized font family 'Material Icons'

解决方案：

npm install react-native-vector-icons --save
react-native link react-native-vector-icons 

4、ReactNative 在 iOS 模拟器上运行很慢

解决方案：

在命令行执行如下命令：
react-native link

会出现如下提示：
rnpm-install info Linking react-native-video ios dependency
rnpm-install info iOS module react-native-video has been successfully linked

表示已经连接成功,下次运行速度会明显提升,但是如果报错的话,将报错的模块link一下就可以，执行的命令如下：react-native link (模块名)

例如 react-native link react-native-video

5、Print: Entry, ":CFBundleIdentifier", Does Not Exist

解决方案：
找到ios目录下的.xcodeproj 工程文件打开，手动修改BundleIdentifier 配置为可用的BundleID且把工程下含Test的目录都删除。

6、'config.h' file not found
解决方案：
在工程目录下找到如下路径并执行指令：

cd node_modules/react-native/third-party/glog-0.3.4
//  第一步。找到路径，进入glog-0.3.4文件里

../../scripts/ios-configure-glog.sh
//  第2步，执行配置脚本。

7、obtain an updated library from the vendor, or disable bitcode for this target

解决方案：
打开.xcodeproj 工程找到Build Settings配置下的Enable Bitcode 设置为NO

3.RN框架以及项目实例

1、CRN
CRN是Ctrip React Native简称，由携程无线平台研发团队基于React Native框架优化，定制成稳定性和性能更佳、也更适合业务场景的的跨平台开发框架。

开源地址：
https://github.com/ctripcorp/crn

2、beeshell
美团开源的一个 React Native 应用的基础组件库，基于 0.53.3 版本，提供一整套开箱即用的高质量组件，包含 JS 组件和复合组件（包含 Native 代码），涉及 FE、iOS、Android 三端技术，兼顾通用性和定制化，支持自定义主题，用于开发和服务企业级移动应用。

开源地址：
https://github.com/Meituan-Dianping/beeshell

3、ReactNativeOne
基于React-Native的高仿「ONE·一个」，兼容Android、iOS双平台（由于接口原因，该代码库不再更新）

开源地址：
https://github.com/lipeiwei-szu/ReactNativeOne

4、OneM
OneM是一款纯ReactNative打造的集杂志浏览、音乐播放、视频播放于一体的综合性App(时光网+ONE),并且支持iOS和Android双平台,并且完美适配iPhoneX与Android机型。

开源地址：
https://github.com/guangqiang-liu/OneM

4.教程资料

《React Native视频教程-项目实战》该套视频由全栈特级讲师旋之华录制。

链接:
https://pan.baidu.com/s/1yEfCKjxJ4ObIiw9w-Q5uNQ 密码:14dw