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的更多相关文章

  1. iOS原生项目集成React Native模块

    今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...

  2. Android 工程集成React Native 0.44 注意点

    当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...

  3. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

  4. iOS原生项目中集成React Native

    1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...

  5. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  6. iOS程序员的React Native开发工具集

    本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

  7. [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 ...

  8. iOS、swift、React Native学习常用的社区、论坛

    <!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...

  9. 【React Native开发】React Native For Android环境配置以及第一个实例(1)

    年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...

  10. 【React Native开发】React Native配置执行官方样例-刚開始学习的人的福音(8)

    ),React Native技术交流4群(458982758),请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

随机推荐

  1. Leetcode 笔记 112 - Path Sum

    题目链接:Path Sum | LeetCode OJ Given a binary tree and a sum, determine if the tree has a root-to-leaf ...

  2. linux安装mvn后提示权限不够

    Maven - 环境配置 Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK. 系统要求 项目 要求 JDK Maven 3.3 要求 JDK 1.7 或以上Maven 3 ...

  3. 用php生成一个excel文件(原理)

    1.我们用php来生成一个excel文档来讲述其原理: excel2007里面的文档目录组成部分为: 2.我们使用ZipArchive()方法来生成一个简易的excel文件. 使用方法: 3.代码如下 ...

  4. 1.Kali安装到移动硬盘或者U盘中~Linux系通用方法(包括Android)

    0.1.保证这个服务必须启动(虚拟机服务最好都启动) 0.2.看看U盘接口类型是否对应 1.安装第一步 2.安装第二步,选择kali镜像 3.设置存放位置(上面的名字无所谓,最后不会用它的,虚拟机只是 ...

  5. 【解决方案】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 ...

  6. Python标准模块--import

    1 模块简介 作为一个Python初学者,你首先要学会的知识就是如何引入其它模块或者包.但是,我发现有些开发者虽然使用Python很多年,依然不了解Python引入机制的灵活性.这篇文章,我们就会研究 ...

  7. 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": { " ...

  8. jeffy-vim-v3.0

    jeffy-vim-v3.0 修改了配色.

  9. Vertica节点宕机处理一例

    Vertica节点宕机处理一例: 查询数据库版本和各节点状态 常规方式启动宕机节点失败 进一步查看宕机节点的详细日志 定位问题并解决 1. 查询数据库版本和各节点状态 dbadmin=> sel ...

  10. 【分布式】Zookeeper在大型分布式系统中的应用

    一.前言 上一篇博文讲解了Zookeeper的典型应用场景,在大数据时代,各种分布式系统层出不穷,其中,有很多系统都直接或间接使用了Zookeeper,用来解决诸如配置管理.分布式通知/协调.集群管理 ...