ios native工程集成react-native的demo
react-native看到了给现有工程添加react-native环境的时候碰到一个问题:
如何往工程中添加 package.json文件,以及node_modules是怎么来的?
我开始的时候以为是自己创建的文件夹,package.json文件也是通过vim来写的。
但是就在写package.json时 写了一下我就感觉特别不方便。于是我想到了npm:node package manager. 尝试了一下,果然通过npm可以帮助我们完成这项任务。
具体操作:
1、进入你工程的根目录
2、npm init (这个工作跟cocoapods的podfile文件初始化有点像)-> 根据提示输入工程的package.json的内容。
3、npm install
经过上述的步骤之后我们的工程根目录底下就有了react-native的环境了。
然后此时我要导入的redux框架,这时候我只要往dependcies中增加:
"name": "RNIntergrationDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2",
"redux":"3.6.0"
},
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "18.1.0",
"react-test-renderer": "15.4.1"
},
"jest": {
"preset": "react-native"
}
接下来是配置podfile:
进入工程根目录下的ios目录(就是有xproject文件的目录),然后通过CocoaPods进行初始化:pod init操作
生成Podfile
在Podfile中你的工程的target 名字下 添加对React-Native支持的依赖框架
pod 'React':path=>'../node_modules/react-native',subspecs=>[
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket']
这样你的依赖就添加好了。
接下来操作是:
1、把你的 (index.ios.js )js代码写好。
2、在具体页面中加载这个你刚才写好的的这个js
加载方法:
a、初始化js加载路径:
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
b、在ViewController的loadView方法中初始化一个RCTRootView并设置成当前ViewController的view。
tform=ios"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"你js中的register的component名字" initialProperties :
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
} ]
} launchOptions:nil];
由于你的js加载路径是http协议的本地路径,所以你要设置一下info.plist才能访问到(设置ATS),只要加上Allow Arbitrary Loads属性设置为YES就可以了。最后上传一下demo.
https://github.com/zLihuan/RNIOSIntergrationDemo.git demo的用法在github的README上可以看到。
其实就是跟着facebook的集成步骤一步一步来的。【大写的
ios native工程集成react-native的demo的更多相关文章
- iOS原生项目集成React Native模块
今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...
- Android 工程集成React Native 0.44 注意点
当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...
- react native 之 在现有的iOS工程中集成react native
在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- [React Native] Installing and Linking Modules with Native Code in React Native
Learn to install JavaScript modules that include native code. Some React Native modules include nati ...
- iOS、swift、React Native学习常用的社区、论坛
<!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...
- 【React Native开发】React Native配置执行官方样例-刚開始学习的人的福音(8)
),React Native技术交流4群(458982758),请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
随机推荐
- Leetcode 笔记 112 - Path Sum
题目链接:Path Sum | LeetCode OJ Given a binary tree and a sum, determine if the tree has a root-to-leaf ...
- linux安装mvn后提示权限不够
Maven - 环境配置 Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK. 系统要求 项目 要求 JDK Maven 3.3 要求 JDK 1.7 或以上Maven 3 ...
- 用php生成一个excel文件(原理)
1.我们用php来生成一个excel文档来讲述其原理: excel2007里面的文档目录组成部分为: 2.我们使用ZipArchive()方法来生成一个简易的excel文件. 使用方法: 3.代码如下 ...
- 1.Kali安装到移动硬盘或者U盘中~Linux系通用方法(包括Android)
0.1.保证这个服务必须启动(虚拟机服务最好都启动) 0.2.看看U盘接口类型是否对应 1.安装第一步 2.安装第二步,选择kali镜像 3.设置存放位置(上面的名字无所谓,最后不会用它的,虚拟机只是 ...
- 【解决方案】cvc-complex-type.2.4.a: Invalid content was found starting with element 'init-param'. One of '{"http://java.sun.com/xml/ns/javaee":run-as, "http://java.sun.com/xml/ns/javaee":security-role-r
[JAVA错误] cvc-complex-type.2.4.a: Invalid content was found starting with element 'init-param'. One o ...
- Python标准模块--import
1 模块简介 作为一个Python初学者,你首先要学会的知识就是如何引入其它模块或者包.但是,我发现有些开发者虽然使用Python很多年,依然不了解Python引入机制的灵活性.这篇文章,我们就会研究 ...
- Encountered an unexpected error when attempting to resolve tag helper directive '@addTagHelper' with value '"*, Microsoft.AspNet.Mvc.TagHelpers"'
project.json 配置: { "version": "1.0.0-*", "compilationOptions": { " ...
- jeffy-vim-v3.0
jeffy-vim-v3.0 修改了配色.
- Vertica节点宕机处理一例
Vertica节点宕机处理一例: 查询数据库版本和各节点状态 常规方式启动宕机节点失败 进一步查看宕机节点的详细日志 定位问题并解决 1. 查询数据库版本和各节点状态 dbadmin=> sel ...
- 【分布式】Zookeeper在大型分布式系统中的应用
一.前言 上一篇博文讲解了Zookeeper的典型应用场景,在大数据时代,各种分布式系统层出不穷,其中,有很多系统都直接或间接使用了Zookeeper,用来解决诸如配置管理.分布式通知/协调.集群管理 ...