54到Swift原生项目,打离线包

作者:计算机知识

1.首先react-native init 一个初叶react-native项目,然后找到ios目录,把ios目录中的项目工程成套刨除。(注意事项:在剔除在此以前必得深深记住那一个工程的名字和路径待会第三步需求使用)如下图:1.0

1.环境

照着官方文书档案撸,撸出了天马行空的坑[泪奔中ing],可是无妨,最终依旧弄出了三个布局。
先上效果图:

54到Swift原生项目,打离线包。1.react native 在本机能够访谈到的气象下是足以在真机械运输维, 然而不在WIFI景况下真机是运转不了,所以我们以当时候须要打离线包.

facebooK 为大家提供的通令:  


react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false


图片 11.0

首先计算机上一定要有运维ios项目和react-native的碰到,以下表达都以依照,react-native以下简单的称呼智跑N,iOS项指标条件就毫无说了,XC60N的情状计划须要

首先个Tab是导入的SportageN页面,后八个是原生。

2.将项目工程iOS目录下的assets 拖入xcode项目中 注意要用Create folder references去添加

图片 2

asset

图片 3

投入项目中

最终在APPDelegate.m上校代码改过

NSURL *jsCodeLocation;

// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation

moduleName:@"RNBundleDemo"  initialProperties:nil  launchOptions:launchOptions];

末段command  传祺  就足以了

2.然后把您要求导入的iOS项目copy只怕拖到刚刚上一步的ios目录中,这时候张开iOS项目必需运维下,检查下项目是还是不是能编译成功。

Homebrew:运营以下命令安装

图片 4

图片 51.1

/usr/bin/ruby -e "$(curl -fsSL )"

合成功效图.gif

3.在XCode左边文件栏中新建七个Libraries文件,然后把第一步的那贰个工程文件(在node_modules/react-native/React目录中State of Qatar拖入到那文件目录上图1.0:

在Max OS X 10.11(El CapitanState of Qatar版本中,homebrew在装置软件时大概会蒙受/usr/local目录不可写的权杖难点。能够运用上面包车型客车吩咐修复:


4.然后在TA瑞虎GETS找到呼应品种的名,点击项目名->Builid Phases->Link Binary With Libraries:

sudo chown -R `whoami` /usr/local

友谊提示:假若您弄过集成到原生项目依然对LacrosseN 开垦和原生开垦比较熟练,那么,请间接往下看。假若您是第贰回弄,而且对HavalN不是很熟谙,那请您活动到官方的学科,链接如下:
Facebook官方:https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
React-native中文网:https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content

把对应1.0图的**.xcodeproj的.a文件出席进来如下图3.0:

Node:运维以下命令

将react-native集成到存活的原生应用是七个极度有价值的做法。
十分重要由以下多少个步骤:
1、创立七个原生项目。
2、成立react-native相关目录和文书。
3、创设Podfile,用cocoaPods处理react-native信赖。(这一步巨坑,坑到不可能呼吸)。
4、加多斯威夫特项目加载react-native页面包车型客车不二秘籍。
5、运转并调整。

图片 63.0

brew install node


5.然后在Builid Phases中新建run Script Phase名字更正为Bundle React Native code and images。然后shell脚本增添路径如下图:

为了幸免事后进程中实践npm命令慢的难题,请用以下商酌把npm之处切换成天猫镜像,那样设置是全局的,以后再实施npm install时会十分的快

创建Swift项目

在这里一步,正是例行的创建大家的swift项目。然后依照大家的须要,搭建平常的档案的次序框架。
此处只供给驾驭叁个概念:

(敲黑板划器重了!!!!卡塔尔

锐界N在原生端显示的东西,是绘制在一个继续自UIView的View视图上的,其连串为RCTRootView

依据这几个概念,我们得以在原生项目中去组织大家的页面关系,路由逻辑了。

export NODE_BINARY=node

npm config set registry

始建react-native相关目录和文书

在这里一步,大家的要害指标是搭建React-native相关的费用遭受。
牢记:不哟啊用react-native命令去向来生成项目,会很蛋疼。

本文由bwin必赢发布,转载请注明来源

关键词: Rea 程序员 最新 工程项目 native