ReactNative工程搭建和改造

官方教程，中文教程。网上也有不少其余资料，可自行搜索。

两种教程里都提到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时已经自动执行过了
复制代码

二、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能正常运行。

2、[!] 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里。

3、转移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第三方原生依赖吧。

2019-07-11 18:57:57 更新

最新的RN版本0.60里关于iOS的部分改动，和我此篇文章改造思路几乎一致，可能Facebook本身也意识到此问题。详情见 React Native 0.60 新特性