博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ios native工程集成react-native的demo
阅读量:5236 次
发布时间:2019-06-14

本文共 1833 字,大约阅读时间需要 6 分钟。

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.

 demo的用法在github的README上可以看到。

其实就是跟着facebook的集成步骤一步一步来的。【大写的?】

 

转载于:https://www.cnblogs.com/codetime/p/6255767.html

你可能感兴趣的文章
二、create-react-app自定义配置
查看>>
Android PullToRefreshExpandableListView的点击事件
查看>>
系统的横向结构(AOP)
查看>>
linux常用命令
查看>>
NHibernate.3.0.Cookbook第四章第6节的翻译
查看>>
使用shared memory 计算矩阵乘法 (其实并没有加速多少)
查看>>
Django 相关
查看>>
git init
查看>>
训练记录
查看>>
IList和DataSet性能差别 转自 http://blog.csdn.net/ilovemsdn/article/details/2954335
查看>>
Hive教程(1)
查看>>
第16周总结
查看>>
C#编程时应注意的性能处理
查看>>
Fragment
查看>>
比较安全的获取站点更目录
查看>>
苹果开发者账号那些事儿(二)
查看>>
使用C#交互快速生成代码!
查看>>
UVA11374 Airport Express
查看>>
P1373 小a和uim之大逃离 四维dp,维护差值
查看>>
NOIP2015 运输计划 树上差分+树剖
查看>>