Swift项目引入react-native
来源:互联网 发布:淘宝上分期付款买手机 编辑:程序博客网 时间:2024/05/16 19:24
一.创建一个Swift工程,姑且为RNApp
二.创建RNComponent文件夹
在项目中建一个名为RNComponent的文件夹,用于存放我们react-native的相关文件, 再创建一个package.json文件, 用于初始化react-native.(文件夹名字自定义哈)
文件目录结构如下:
package.jsonw文件内容如下
其中name为项目名称,devDependencies和jest均可以不要,我是直接新建了一个同名的RN项目( react-native init ProjectName --version 0.44.2 )把其中的package.jsonh和index.ios.js文件扯过用的 但必须确保工程名相同
三,安装React Native依赖包
在RNComponent目录下运行命令行:
npm install
这个过程比较费时,可以直接把RN项目中的node_modules文件夹直接拖过来用(亲测可用)
四.Cocoapods集成React Native
Podfile文件内容为(需确保路径对):
# 请将:path后面的内容修改为正确的路径(一定要确保正确~~)。pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => ['Core','ART','RCTActionSheet','RCTAdSupport','RCTGeolocation','RCTImage','RCTNetwork','RCTPushNotification','RCTSettings','RCTText','RCTVibration','RCTWebSocket','RCTLinkingIOS',]
在终端执行 pod install 会出现下图错误
这是因为在指定的路径没有寻找到相应的组件。此时就需要修改podfile文件中的路径,由于上方提示没有 Yoga
,那我们就指定Yoga的路径。如下:
# 请将:path后面的内容修改为正确的路径(一定要确保正确~~)。pod 'Yoga', :path => './RNComponent/node_modules/react-native/ReactCommon/yoga'pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => ['Core','ART','RCTActionSheet','RCTAdSupport','RCTGeolocation','RCTImage','RCTNetwork','RCTPushNotification','RCTSettings','RCTText','RCTVibration','RCTWebSocket','RCTLinkingIOS',]
重新执行pod install 成功
五.原生项目处理
1.添加RNViewController
代码如下
import UIKitimport Reactclass RNViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let strUrl: String = "http://localhost:8081/index.ios.bundle?platform=ios&dev=true" let jsCodeLocation = URL(string: strUrl) let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "RNApp", initialProperties: nil, launchOptions: nil) view = rootView } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. }}
2. iOS项目更新App Transport Security
在iOS 9以上的系统中,除非明确指明,否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做,在尝试通过http连接到服务器时,会遭遇这个错误 - Could not connect to development server.
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>
配置效果如下:
3. 启动开发服务器
在运行我们的项目之前,我们需要先启动我们的开发服务器。进入 reactnative目录 ,然后命令行启动服务:
react-native start
(或者找到server,在node_moduls/react-native/local-cli/server,在此目录中执行npm start 启动服务。)
多个运行时会出现下图错误,
这是因为已经有一个端口为8081的本地服务器在运行了,,把在运行的关闭,重新执行代码启动服务器,
command R 运行工程
工程运行时出现的错误
1,如下图
URL: http://localhost:8081/index.ios.bundle?platform=ios&dev=true, NSLocalizedFailureReason=The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.}2017-09-12 14:43:49.571 [fatal][tid:main] Could not connect to development server.Ensure the following:- Node server is running and available on the same network - run 'npm start' from react-native root- Node server URL is correctly set in AppDelegate
let strUrl: String = "http:// localhost:8081/index.ios.bundle?platform=ios&dev=true"
改为
let strUrl: String = "http://192.168.0.61:8081/index.ios.bundle?platform=ios&dev=true"
原因之一:做本地局域网开发环境,大部分都会做服务器映射处理,localhost 被指向特定的IP 而不是本机的192.168.0.61, 就会出现这样的问题。
到这一步终于可以显示RN的界面了
2017-09-12 14:49:09.594815+0800 RNApp[16828:281355] [] nw_connection_get_connected_socket_block_invoke 3 Connection has no connected handler
解决办法如下
1. Xcode menu -> Product -> Edit Scheme...
2. Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
3. Run your app again, done! 这样就没问题了
大功告成!!!!!!
- Swift项目引入react-native
- 学习---Android项目引入React Native
- Android引入react native
- 在已有的项目中引入react native
- React-native外部引入样式
- Swift Modules for React Native
- 运行React-Native项目
- React-native项目改包名
- 创建React Native项目
- react native项目创建
- React Native实战项目
- 创建react-native项目
- 新建react native 项目
- React Native项目建立
- react native天气项目
- react-native 项目学习
- React Native项目结构
- React-Native(二)引入项目,在windows上运行已有的Demo for Android
- 338. Counting Bits
- Git命令大集结
- 【ORACLE】Runstatus_pkg 性能比较工具脚本及使用
- Elasticsearch_基本操作
- BZOJ 1059 矩阵游戏 二分图匹配
- Swift项目引入react-native
- AndroidStdio集成FFmpeg
- 使用Maven构建web项目时的基本过程
- link与@import的区别
- 支招:如何提高芝麻信用分到800以上
- Android module switch语句报错问题
- Android 4.0版百度地图marker动画设置与取消
- echart 饼图数据显示
- iMac 制作系统U盘方法: