学习Reate Native的踩坑之路

搭建环境

官方环境搭建地址、官方原生集成地址

本人环境：mac10.15.4、Xcode11.4、brew:2.2.16、Pods:1.9.1、npm:6.14.4、react-native: 0.62.2

这里环境搭建就不多说了，官网跟着走就是了（注意官方给出的文档中黄色区域非常重要，仔细阅读）。

巨坑：Podfile配置

官方给的Podfile配置是过时了的，反正我是一路翻红

[!] CocoaPods could not find compatible versions for pod "React/Core":In Podfile:React/Core (from `../node_modules/react-native`)None of your spec sources contain a spec satisfying the dependency: `React/Core (from `../node_modules/react-native`)`.You have either:* out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.* mistyped the name or version.* not added the source repo that hosts the Podspec to your Podfile.

遇到这个问题莫慌，先检查你的所有配置环境是否最新，reate-native老版本的对应环境版本官方没说，我也不知道，所以保持最新就好了，除了你的配置环境版本不匹配之外就是Podfile的配置问题，这里给出我的配置：

# 对于Swift应用来说下面两句是必须的
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'use_frameworks!
#消除三方库的警告
inhibit_all_warnings!target 'RNRecordLearn' dopod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"pod 'React', :path => '../node_modules/react-native/'pod 'React-Core', :path => '../node_modules/react-native/'pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"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'#  use_native_modules!target 'RNRecordLearnTests' doinherit! :search_paths# Pods for testingendtarget 'RNRecordLearnUITests' do# Pods for testingendend

pod init 后见绿，那么恭喜你RN已经集成完成了

然后就是怎么用的了

首先在项目根目录下创建一个空的index.js（最好是命名：index.ios.js）文件，测试内容例如：

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';class RNHighScores extends React.Component {render() {return (<View style={styles.container}><Text style={styles.hello}>我是第一个页面，我进来了哦</Text></View>);}
}
const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',},hello: {fontSize: 20,textAlign: 'center',margin: 10,},
});AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

要把index加载到我们原生项目里面有两种方式：

1、通过启动开发服务器（ Packager，它负责实时监测 js 文件的变动并实时打包，输出给客户端运行），进入跟项目根目录（index.js所在目录）

执行命令：$ npm start

就这样，然后在你想要加载的地方输入代码后运行程序：

let jsCodeLocation: URL = URL(string: "http://localhost:8081/index.bundle?platform=ios")!
//与RN的通信，这里可以传值
let mockData: [AnyHashable : Any] = [:]let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "RNHighScores", initialProperties: mockData, launchOptions: nil)
let rnLear = RNLearToolController()
rnLear.view = rootView
self.navigationController?.pushViewController(rnLear, animated: true)

2、将js项目打包成xxx.jsbundle文件

在RN项目的根目录下创建release_ios文件夹

$ react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

然后你就会发现release_ios文件夹下面出现了一些文件，我这里没有图片等资源，所以只有main.jsbundle一个文件

然后将main.jsbundle拖到你的原生项目里面

然后在你想要加载的地方输入代码后运行程序，RNLearToolController是我自己创建的ViewController来接收RCTRootView

//与RN的通信，这里可以传值
let mockData: [AnyHashable : Any] = [:]let jsCodeLocation2: URL = Bundle.main.url(forResource: "main", withExtension: "jsbundle")!let rootView = RCTRootView(bundleURL: jsCodeLocation2, moduleName: "RNHighScores", initialProperties: mockData, launchOptions: nil)
let rnLear = RNLearToolController()
rnLear.view = rootView
self.navigationController?.pushViewController(rnLear, animated: true)

集成RN就到此结束了！！！

Swift原生项目中集成RN的踩坑笔记相关推荐

rn项目假如cocoapods_在项目中集成 RN
在项目中集成 RN 19 Jan 2017 前言使用 RN 难道要把整个项目都重构一遍么?教程那么多,但是很少能够有把怎么与当前项目结合起来的文章.自己摸索了一遍,记录下来.之后的 RN 之路就由此 ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
java web项目中的根路径踩坑
以下总结来自于颜群老师课堂笔记. java web项目中的"/"怎样区分? 项目根目录: WebContent \ src(所有的构建目录) 如果WebContent中有一个文件i ...
vue中集成blockly的踩坑之旅
blockly是一款可视化编辑器. blockly源码下载地址:https://gitee.com/mirrors/blockly?_from=gitee_search blockly的文档参考网址: ...
unity片元着色器中获取屏幕坐标_Unity踩坑笔记（持续更新）
1.error CS0104: 'MinAttribute' is an ambiguous reference between 'UnityEngine.Rendering.PostProcessi ...
uniapp android原生,在uni-app项目中集成Android原生工程
[TOC] # 在uni-app项目中集成Android原生工程按照官方的方案,我们如果进行本地打包的话,需要重新创建一个Android原生工程,于是就会导致我们管理多个项目,切来切去的也麻烦. 经 ...
SpringBoot12 QueryDSL01之QueryDSL介绍、springBoot项目中集成QueryDSL、利用QueryDSL实现单表RUD、新增类初始化逻辑...
1 QueryDSL介绍 1.1 背景 QueryDSL的诞生解决了HQL查询类型安全方面的缺陷:HQL查询的扩展需要用字符串拼接的方式进行,这往往会导致代码的阅读困难:通过字符串对域类型和属性的不安 ...
Android项目中集成华为账号登录、支付
最近项目中集成了华为账号登录与支付的功能,把踩过的坑和过程记录下来. 先看下支付效果图: 支付价格0.01请忽略,因为这是为了测试用的. 刚开始接到这个项目的时候我很奇怪,为什么要集成华为支付呢,原有 ...
maven mybatis mysql_Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问...
标签: 本篇内容还是建立在上一篇Java Web学习系列--Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Ja ...

Swift原生项目中集成RN的踩坑笔记