iOS原生项目中集成React Native

iOS项目集成React Native指南

最新推荐文章于 2024-12-24 14:22:51 发布

原创

最新推荐文章于 2024-12-24 14:22:51 发布 · 1.8w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#iOS #React Native #集成

本文介绍了如何在iOS原生项目中集成React Native。首先确保安装了CocoaPods和React Native环境，接着通过Xcode创建新工程。然后利用CocoaPods配置并安装React Native。在工程目录下建立Components文件夹和index.ios.js文件，编写必要代码。在集成过程中遇到了路径过长的错误以及服务器连接和安全问题。

1.本文的前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。

2.使用Xcode新建一个工程。EmbedRNMeituan

[图1]

3.使用CocoaPods安装React Native

在工程目录下新建Podfile文件，并配置需要使用的第三方库

pod 'React', '0.13.0-rc'
pod "React/RCTText"
pod "React/RCTActionSheet"
pod "React/RCTGeolocation"
pod "React/RCTImage"
pod "React/RCTLinkingIOS"
pod "React/RCTNetwork"
pod "React/RCTSettings"
pod "React/RCTVibration"
pod "React/RCTWebSocket"
platform :ios, '7.0'

注：如果你需要在React Native中使用<Text>，就需要添加 pod "React/RCT

最低0.47元/天解锁文章

8 条评论

lingluanchen 2016.03.30
博主你好，请问Podfile文件里面你省略了什么没有？我卡在 pod install那步了。最后我只好init了一份，拷贝RN环境，然后手动配置。对RN对应的cocoapods语法规则不是太了解的说。

lingluanchen 2016.03.30
博主你好，请问Podfile文件里面你省略了什么没有？我卡在 pod install那步了。最后我只好init了一份，拷贝RN环境，然后手动配置。对RN对应的cocoapods语法规则不是太了解的说。
- 仰望星空HK回复lingluanchen 2016.04.05
  [reply]lingluanchen[/reply] 没有省略什么，pod install卡是因为他在检查更新，可以使用 pod install --verbose --no-repo-update 跳过检查更新

qq_32609179 2016.03.18
你好，请问我是搭配出来显示的是安卓的呢

cjackyang 2016.03.02
你好，我是做iOS 原生的，现在在学react native，但是感觉入门难，想请教学习方法

Lotheve 2016.01.27
博主你好，请教你一个问题。我在原生中集成了RN，然后想在RN中使用react-native-swiper，用npm安装了，node_modules目录下找得到，然后index文件中require('react-native-swiper')，但是运行的时候报错：requiring unknown module react-native-swiper。请教一下是什么原因呢？应该是路径不对吧，但是怎么设置呢？
- Lotheve回复仰望星空HK 2016.02.03
  [reply]l863784757[/reply] 非常感谢！
- 仰望星空HK回复Lotheve 2016.01.28
  [reply]Lotheve[/reply] 用的是CocoaPods方式么？你用npm安装后，react-native-swiper这个文件夹应该可以在***/Pods/React/node_modules/ 这个目录下找到，然后把这个文件夹拷贝到***/Pods/React/Libraries/目录下，就可以了