ReactNative工程搭建和改造

Fourierr 发布于2019-05-22 19:08 / 1930人阅读

摘要：官方教程，中文教程。也可使用根据提示对工程进行转原生混合方式，应该不能逆转吧。这时工程项目已经初步完成。我实际工作中遇到很多类似报的头文件未找到的问题。到此，工程的基本改造完成，尽情使用安装第三方原生依赖吧。

官方教程，中文教程。网上也有很多其他资料，可自行搜索。

两种教程里都提到2种方式：沙盒方式（expo）、与原生混合（Native Code），他们的区别在于是否会编写原生代码。expo方式中集成了部分原生的功能，直接引用expo sdk即可。也可使用yarn ejected根据提示对工程进行转原生混合方式，应该不能逆转吧。

考虑到国内对APP的要求，如个性化、性能要求等等，还是选择与原生混合方式较好，方便后期扩展。

下面以iOS为例，记录下我的改造过程：

一、工程构建

1、工程目录构建

$ yarn global add react-native-cli
$ react-native init doctor_app
$ cd doctor_app
$ yarn install	// 此步可能在init时已经自动执行过了

2、iOS添加pod支持

$ cd ios
$ pod init
$ vim Podfile	// 更改platform为9.0，可以移除其他未用的target
$ pod install

双击打开生成的doctor_app.xcworkspace后，会在doctor_app工程中的Libraries看到React的默认支持。这时iOS工程项目已经初步完成。如果需要添加原生支持的RN三方依赖，以react-native-device-info为例

$ yarn add react-native-device-info
$ react-native link react-native-device-info	// 推荐用link自动方式，也有其他多种方式，按照库的问题操作即可
$ cd ios
$ pod install

最后，就可以在RN代码里react-native-device-info的API，编译后APP能正常运行。

二、[!] React has been deprecated

在上面pod install之后可能会注意到控制台有黄色的提示[!] React has been deprecated，同时发现pod过程中安装React 0.11.0，但明明package.json里使用的"react-native": "0.59.8"。

有强迫症的表示不能接受，哈哈…..如果此时通过pod方式安装code-push，编译还会报错React/RCTEventEmitter.h file not found in CodePush.h，此问题在code-push的issues上有提到很多次。我实际工作中遇到很多类似报RN的头文件未找到的问题。是不是很尴尬！明明装了RN，而且还安装了两个版本。

大致原因就是头文件引用的问题。下面用白话简单阐述，虽说工程构建时添加了RN版本A，走的Library形式，但是用pod安装的RN依赖并不能准确找到RN版本A的头文件，导致会自动安装一个RN版本B(即0.11.0)。这时用pod方式安装的code-push会自动首先找到RN版本B，报上面的错误也能理解，毕竟code-push发布时依赖RN版本最低要求0.xx.x（仅是我猜测，未验证！）。

解决方式就是将Library里的RN版本A移到Podfile里。

三、转移React Native到Podfile

即把下面这些Library转移到Podfile里去，这时有没有想起什么？转移原理其实是集成到现有原生应用，只不过转移后还保留了react-native-cli脚手架在Xcode中的配置，比如打包RN代码的脚本等。一般情况下将RN集成到现有原生APP里，在打包APP时需要首先打包RN的离线文件，更详细见React Native iOS打包详解。

在Podfile里添加下面的代码，然后pod install即可会安装两个RN版本的问题。

  pod "React", :path => "../node_modules/react-native", :subspecs => [
    "Core",
    "CxxBridge",
    "DevSupport",
    "RCTText",
    "RCTImage",
    "RCTNetwork",
    "RCTWebSocket",
    "RCTAnimation",
    "RCTLinkingIOS",
    "RCTSettings",
    "RCTGeolocation",
    "RCTActionSheet",
    "RCTVibration",
    "RCTBlob",
  ]
    
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  
  pod "DoubleConversion", :podspec => "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
  pod "glog", :podspec => "../node_modules/react-native/third-party-podspecs/glog.podspec"
  pod "Folly", :podspec => "../node_modules/react-native/third-party-podspecs/Folly.podspec"

为了保险起见，将上述截图里的RN子模块全部移除掉Remove Reference，不是Move to Trash。接着用Xcode编译试试APP看能不能正常运行。

到此，RN工程的基本改造完成，尽情使用Podfile安装RN第三方原生依赖吧。

云服务器 GPU云服务器 ReactNative工程搭建工信部：首批适老化改造网站和APP将于2 ReactNative reactnative webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6840.html

初次接触ReactNative，搭建环境、调试时遇到的报错们及解决方法

摘要：初次搭建总会碰上各种报错以及红黄屏报错如果尚未搭建环境，请转至官网搭建红屏是程序无法正常运行，黄屏是程序可以运行但是可能存在一些潜在问题首次使用命令行工具来创建一个名为的新项目后运行后会报错，如图解决方法到你的已有项目中复制一份文件到初次搭建ReactNative总会碰上各种报错以及红黄屏报错如果尚未搭建环境，请转至官网搭建https://reactnative.cn/docs/g....

elliott_hu 2019-08-23 12:25 评论0 收藏0
用 Vue 来写 React 和 ReactNative

摘要：的响应核心的响应式系统是支撑整个框架运行的关键，也是的核心之一，官方对这个核心的分层设计得很好也是依靠其驱动原生视图。我们日常用到的都由核心提供，对这个核心稍作修改，去掉和，意外的获得了一个极小的响应核心，可以运行于任何标准引擎下。 showImg(https://segmentfault.com/img/bVPMZy?w=1468&h=826); GitHub: react-vue ...

maybe_009 2019-08-20 17:33 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0