iOS 项目集成RN步骤和问题点

最新推荐文章于 2025-07-14 09:48:27 发布

Dev_Meng

最新推荐文章于 2025-07-14 09:48:27 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： RN

本文链接：https://blog.youkuaiyun.com/mengguihua110/article/details/79420198

RN 专栏收录该内容

1 篇文章

订阅专栏

最好先用命令行创建一个RN,react-native init + 项目名，后面集成的时候可以直接拿来用里面的文件，而不用命令行查询版本，因为RN建议里面的react-native或react使用最新版本。

1、搭建ReactNative 开发基础环境，按https://reactnative.cn/docs/0.45/getting-started.html

文档来安装必须的工具,中间可能会遇到不同的问题，但是经验证明只要按照终端的提示问题点一步步来，都可以解决，我集成的时候主要问题我记得因为网络xcode command lIne Tools 未安装成功，想跳过安装下面的但是发现后面的时候还是有问题，还是不能急的。

在终端查看RN版本：react-native -v

我的RN版本是：v2.0.1

2、创建一个iOS 工程 MyRNTestDemo

3、进入到工程根目录下面执行安装ReactNative 命令行工具 npm install -g react-native-cli

4、在工程的根目录下创建一个RNUtils 文件夹来存放相关的RN文件

5、在React 文件夹下创建一个package.json 文件,也可以直接从刚创建的文件中拷贝过来但要打开修改成当前工程名，或直接输入

{

"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.3"
}

}

6、安卓ReactNative 的依赖包，进入到React 目录下执行npm install

7、安装成功后进入RNUtils 目录，创建index.ios.js（touch index.ios.js），也可以从刚才创建的文件中copy 过来

8、使用cocopods 自动集成react-native

Pod file 文件内容为：

pod ‘yoga’, :path => ’./RNUtils/node_modules/react-native/ReactCommon/yoga/yoga.podspec’

pod ‘React’, :path => ‘./RNUtils/node_modules/react-native’, :subspecs => [

   'Core',

   'ART',

   ‘DevSupport’,

   'RCTActionSheet',

   'RCTGeolocation',

   'RCTImage',

   'RCTNetwork',

   'RCTPushNotification',

   'RCTSettings',

   'RCTText',

   'RCTVibration',

   'RCTWebSocket',

   'RCTLinkingIOS',

   'BatchedBridge’,

]

9、执行pod install

10、工程中注意添加libc++库

11、配置网络

12、如果发现

can't find variable:xxx

import { 
 AppRegistry, 
 StyleSheet, 
 Text,  
View,  
  PixelRatio,  
  Dimensions,   
  xxx,
} from 'react-native';

添加即可

13、

方法：

index.ios.js 内注册app名写错

也有其它集成方式比如：把iOS 项目放到RN的子目录下，那样就是以RN为主，但是我总感觉那样就不是iOS 集成RN了，所以选择了这种。

其它方式参考：https://juejin.im/entry/5a16342051882503eb4af0ad

https://reactnative.cn/docs/0.45/integration-with-existing-apps.html#content

我的demo地址：http://download.youkuaiyun.com/download/mengguihua110/10266108

RN 版本的变动会带来不同的问题点。

问题点：

原因是我未添加‘DevSupport’,网上竟然没人遇到过同样的问题，mark 一下吧。遇到这类问题可以去找下文件目录，确认路径下能否搜索到，然后判断是否未导入或路径是否设置错误

问题点：

"facebook::react::IRemoteConnection::~IRemoteConnection()", referenced from:

RemoteConnection::~RemoteConnection() in libReact.a(RCTInspector.o)

"facebook::react::systemJSCWrapper()", referenced from:

  -[RCTSamplingProfilerPackagerMethod handleRequest:withResponder:] in libReact.a(RCTSamplingProfilerPackagerMethod.o)
  -[RCTDevSettings isJSCSamplingProfilerAvailable] in libReact.a(RCTDevSettings.o)
  -[RCTDevSettings toggleJSCSamplingProfiler] in libReact.a(RCTDevSettings.o)

"facebook::react::parseTypeFromHeader(facebook::react::BundleHeader const&)", referenced from:

  +[RCTJavaScriptLoader attemptSynchronousLoadOfBundleAtURL:runtimeBCVersion:sourceLength:error:] in libReact.a(RCTJavaScriptLoader.o)

。。。。

ld: symbol(s) not found for architecture x86_64 clang: error: linker command failed with exit code 1 (use -v to see invocation)

解决方法：

pod 中增加'BatchedBridge', #RN版本高于0.45之后必须导入