iOS 原生项目集成 React Native经验

iOS 原生项目集成 React Native


前置条件,配置react native 环境,官网有很详细的介绍,此处就不叙述了,请自行前往 传送门


正文

  • 设置目录结构

创建一个空的文件夹用于存放 React Native 项目,然后在其中再创建一个ios文件夹,将现有的 iOS 项目拷贝到子目录中,如下图,本次示例结构目录为 RNDemo/ios

目录结构
  • 安装 JavaScript 依赖

RNDemo中创建一个文件名为package.json文件,然后填入 React Native 相关信息,建议先使用 react-native 命令创建一个纯 react native 项目,然后拷贝 package.json,这样可以确保版本对照关系是正确的,附上本次 demo 的内容

{
  "name": "Demo1",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-code-push": "^5.3.4"
  },
  "devDependencies": {
    "babel-jest": "23.0.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.0.1",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

然后执行命令安装依赖

npm install

成功后如下图:


安装 JavaScript 依赖
  • 使用 CocoaPods 安装 React Native 依赖

具体怎么安装/使用 CocoaPods 此处就不叙述了,iOS 开发人员应该都会,如果不会的话,请自行 Google

附上 Podfile 文件内容:

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45则加入此行
    'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    'RCTAnimation',
    'RCTActionSheet',
    'RCTImage',
    'RCTVibration',
    'RCTSettings',
    'RCTGeolocation',
    'RCTLinkingIOS'
  ]
  # 如果你的RN版本 >= 0.42.0,则加入下面这行
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

   # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  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'

执行命令安装 Pod

pod install

安装好后如图所示:


目录结构
目录结构
  • 代码集成

RNDemo目录下创建一个 index.ios.js 文件,然后在 Xcode 中使用RCTRootView加载界面即可,此处可参考官方 demo,不再叙述

  • 运行 Debug版本 测试
1.Xcode 配置允许访问网络
image.png
2. 启动本地服务
npm start

3.运行应用
# 在项目的根目录中执行 本例为 RNDemo
react-native run-ios

END


Tip

  • 正式发布时,如果没有是CodePush 或者第三方热更新服务的话,需要将 js 文件index.ios.js 打包成 jsbundle 集成到 Xcode 项目中
react-native bundle --entry-file inde.ios.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/

#exp
react-native bundle --entry-file xxx.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/

Tip 会持续更新...

推荐阅读更多精彩内容