原生项目并入,Native到已有的种类

  • 安装目录结构

一、可参考react-native官网:

多年来在研究React Native,即使RAV4N中文文书档案很明亮,遵照官方网站一步一步来,可是在安插开垦条件中依旧遇到比比较多坑,或然是因为本领更新不慢可是文书档案未有更新,配置情状很麻烦非常是网络倒霉的时候就更可恶,自个儿也是初专家,有窘迫的地点依旧有更加好的提议愿意多多指教。本人对macdown语法不是很在行(懒得去学)排版不是很好,凑合着看呢
环境macos
仿效链接(http://facebook.github.io/react-native/docs/troubleshooting.html)
(http://reactnative.cn/docs/0.44/getting-started.html)

本种类小说作为读书TiguanN时期的总计

成立一个空的文书夹用于寄放 React Native 项目,然后在里边再创造一个ios文本夹,将现成的 iOS 项目拷贝到子目录中,如下图,此次示例结构目录为 RNDemo/ios

二、集成步骤:

一.安装Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一部分其他须要的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在马克斯 OS X 10.11(El Capitan)版本中,homebrew在安装软件时也许会碰着/usr/local目录不可写的权位难题。能够动用下边包车型大巴一声令下修复:

sudo chown -R `whoami` /usr/local
  • React Native如何集成到现成项目中
  • React Native和Native间的通讯
  • RCTRootView、RCTBridge做了怎么样

星彩网app下载 1目录结构

设置项目目录结构

二.使用Homebrew来安装Node.js.安装完node后npm也就设置好了(安装node也得以一向去官方网址下载安装包直接设置,不过不建议如此做,因为卸载的时候也会有一点点麻烦)
brew install node

npm更新版本npm i -g npm

固然ReactNative能幸不辱命iOS和Android的绝大好多逻辑分享一套代码,节约开荒费用;具有像JSPatch这样的热修复功效,为线上难题提供极其灵活的实施方案。可是怎么大部分商铺或然持观看态度,或然只在产品的有个别部分用福特ExplorerN进行支付呢?

  • 安装 JavaScript 依赖

1、伊始新建二个空的目录用于贮存react-native项目,在桌面新建空文件HighlanderN_Peter,然后在那一个文件夹下新建三个子/ios子目录,把现成的门类拷贝到/ios子目录中,如图1所示:

三.展开终端cd到品种根目录下

1.创建package.json文件,那一个是npm安装依赖库时用到的,实行上面发号施令:(也可用实行命令npm init来创设package.json文件这里本人就手动创设了)

touch package.json

那时候你会在根目录下看到三个package.json的文本

2.把以下代码复制到package.json文件里

{
  "name": "NumberTileGame",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3"
  }
}

这里关键的是"scripts"和"dependencies"参数其余参数随便啦。
在这边有个坑,浪费了一点时刻,react-native对react的版本有严苛须求,高于或低于有个别范围都不得以,一初始本人设置的react-native和react版本不对应促成新兴出现难题了,小编用的react版本是"16.0.0-alpha.6",react-native版本是"0.44.2",你可以利用npm info react和npm info react-native来查阅当前的摩登版本,npm update -g react-rative-cli更新到最新版本
进级或许降级npm包的本子
npm install --save react-native@0.49.3

3.装置信赖包
运用npm(node包管理器,Node package manager)来安装React和React Native模块。这一个模块会被设置到花色根目录下的node_modules/目录中。 在含蓄有package.json文件的目录(一般也正是连串根目录)中运作下列命令来设置:

 npm install

设置好后你会在根目录发现三个node_modules目录,张开后你会惊叹的发现怎会有如此多文本夹!不是理所应当唯有react-native和react八个公文夹吗!那是例行的因为react也亟需过多借助包,可是望着项目里有这么多文本夹正是不爽。

第一,React Native官方的有些零部件依旧存在质量瓶颈,开辟复杂现象的时候大概会碰到品质难题,像ListView,动不动就渲染整个视图,尽管生产了FlatList可是也存在着有个别别样的Bug。其次,ENCOREN的广大生态并不到家,比比较多OC或斯威夫特晚春部分Library在N福特Explorer上必要经过ENVISIONN提供的秘籍重复用JS完毕也许须要把那个库桥接到驭胜N。由此一大半商家会挑选交互相当少,页面不太复杂的场所来品尝。本章,主要介绍若是在已有个别App中集成React Native。

RNDemo星彩网app下载,中制造贰个文件名称叫package.json文件,然后填入 React Native 相关音讯,建议先利用 react-native 命令成立三个纯 react native 项目,然后拷贝 package.json,那样能够保障版本对照关系是科学的,附上本次 demo 的内容

星彩网app下载 2image

四.用 CocoaPods 安装 React Native

CocoaPods 是 iOS/Mac 开荒的田间管理工具包。还未曾设置CocoaPods的 先暂停去安装CocoaPods吧。CocoaPods的装置小编就不说了。
在Podfile增添底下内容

# target的名字一般与你的项目名字相同
target 'NumberTileGame' do
# Third party deps
  pod 'Folly', :podspec => 'node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'DoubleConversion', :podspec => 'node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'GLog', :podspec => 'node_modules/react-native/third-party-podspecs/GLog.podspec'
  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    'CxxBridge',#需要依赖上面三个库
    # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0,请加入下面这行
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end

只顾要加入‘BatchedBridge’模块要不然会xcode编译会报错
在意yoga的y要小写不要大写
下一场在CocoaPods的安装目录下施行命令

pod install

关键步骤

  1. 安装奔驰M级N的依据和目录结构
  2. 搞驾驭你要在您的品种中运用的RubiconN组件
  3. 行使CocoaPods加多你要使用的逍客N组件的注重
  4. 使用npm安装JS组件
  5. 在JavaScript意况下,开辟你的CRUISERN模块
  6. 丰裕一个RCTRootView到您的app。它将会作为容器展示你的陆风X8N模块。
  7. 启动RN服务,Run你的App。

停放条件:安装Node、npm最新版本(npm是依照Node达成的包管理工科具和iOS的CocoaPod地位十一分)

{ "name": "Demo1", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest", }, "dependencies": { "react": "16.3.1", "react-native": "0.55.4", "react-native-code-push": "^5.3.4" }, "devDependencies": { "babel-jest": "23.0.1", "babel-preset-react-native": "4.0.0", "jest": "23.0.1", "react-test-renderer": "16.3.1" }, "jest": { "preset": "react-native" }}

安装JavaScript依赖包

五.代码集成

1.先是创立四个空的index.ios.js文件。一般的话大家把它放置在类型根目录下。
index.ios.js是React Native应用在iOS上的输入文件。何况它是供给的!它能够是个很简短的公文,简单到能够只富含一行require/import导入语句。为了轻巧示范,把全体的代码都写到了index.ios.js里(当然实际开拓中大家并不推荐那样做)。
在项目根目录实行以下命令创造文件:

touch index.ios.js

2.在index.ios.js中增多你和谐的组件。这里大家只是简短的丰富三个<Text>组件,然后用三个含有样式的<View>组件把它包起来。

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"n"}</Text>
    );
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          2048 High Scores!
        </Text>
        <Text style={styles.scores}>    
          {contents}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// 整体js模块的名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

途锐NHighScores是总体js模块(即你全部的js代码)的名目。你在iOS原生代码中增多React Native视图时会用到那几个名称。

3.在UIViewController加多八个UIButton,然后在UIButton的点击事件里增加上面代码

- (IBAction)highScoreButtonPressed:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                           moduleName        : @"RNHighScores"
                           initialProperties :
                             @{
                               @"scores" : @[
                                 @{
                                   @"name" : @"Alex",
                                   @"value": @"42"
                                  },
                                 @{
                                   @"name" : @"Joel",
                                   @"value": @"10"
                                 }
                               ]
                             }
                           launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

4.在Info.plist里面加多内容(假如不增添上面内容则供给在点击事件里url地址里localhost换来你的管理器ip地址)
Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

5.在npm的设置目录下实施命令

npm start

星彩网app下载 3

D49379BB-608F-403D-AC8E-F5699F5CDBD1.png

接下来平常运作xcode,点击按键假如一切顺遂会出现

星彩网app下载 4

C36C3DD9-B265-446C-A1D6-577147B84ACB.png

意在您不会看到浅黄的分界面!!!
此地本身遇见七个难点,贰个是上面说的本子不匹配难点应际而生了丁卯革命分界面。还也许有正是Info.plist未有配备网络localhost也并未有改成Computerip地址,也出现了新民主主义革命分界面。

安装途乐N的信赖性和目录结构

为React Native项目开创壹个新的文本夹,在文件夹中新建/ios目录,拷贝全部原项指标剧情到/ios目录下。

下一场推行命令安装依赖

2、在品种的根目录下开创三个名叫package.json的空文本文件,然后填入一下剧情:

六.总结

写了那样多,其实当你打探了全副工艺流程,几分钟就操作好了。小编也是为着防范未来忘了,就写了那篇小说。那才是刚刚开首,笔者也是刚开始了然这一个事物,还恐怕有相当多事物需求去打听。希望多多指教

安装JavaScript依赖

在刚刚新建的文件夹中(即根目录中)创造贰个package.json文本,并累加一下剧情:

{
  "name": "Snapvote",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.4",
    "react-native-vector-icons": "^4.4.2",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.0",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

接下去,安装react和react-native包。展开Terminal,在你项指标根目录下边实行上边发号施令:

npm install --save r16.0.0-alpha.12 react-native

要确认保证这里安装的版本和package.json里证实的本子同样

试行那些命令之后,将会在品种的根目录下创办四个/node_modules的目录,这里保留着全体你项目中所需的JavaScript依赖。

npm install

那会儿,应该检查下react版本(npm info react-native),react-native对react的版本有严俊需求,高于或小于有个别范围都不得以;

八.离线打包jsbundle

在根目录下新建贰个bundle文件夹,然后试行命令

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

把bundle目录下的jsbundle文件拖入工程,大概放置自个儿的服务器就足以应用了,工程里url地址要做相应的更换

安装CocoaPods

这里就不说了

中标后如下图:

{"name":"RN_Peter_Test","version":"0.0.1","private":true,"scripts": {"start":"node node_modules/react-native/local-cli/cli.jsstart"},"dependencies": {"react":"16.0.0-beta.5","react-native":"0.49.3"}}
七.热更新........(http://www.beansmile.com/blog/posts/react-native-hot-deployment)

附上demo(https://github.com/wangkai678/WKReactNativeLearn.git)

配置CocoaPods依赖

在您集成PAJERON到您项目中此前,你须求采用你要运用的React Native库。你将由此CocoaPod库的开辟方式将其集成进去。

星彩网app下载 5

pod_develop

这么些库的subspec文件都会在/node_modules目录下被验证,最后施行pod install命令,全数的React Native库重视到那边就都希图好了。

星彩网app下载 6

pod_file

星彩网app下载 7安装 JavaScript 依赖

本子如图:

思想政治工作代码
  1. 创建 index.js 文件
    在档期的顺序的根目录下创办index.js文本,那些文件是您悍马H2N项指标
    入口,全部在Native中要用到的EscortN模块都在那其间实行挂号。比如项目中的投票列表、设置页面等。各类模块的称号要和Native中的模块名称对应。

    星彩网app下载 8

    rn_modul

  2. 添加React Native 代码(JavaScript和CSS)

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  NativeModules,
  Image,
  ActivityIndicator,
  TouchableOpacity,
  ScrollView,
  Switch,
  TouchableWithoutFeedback,
  Alert,
  NativeEventEmitter,

} from 'react-native';

import StarRatingView from './starRating.view.js'

var { width, height } = require('Dimensions').get('window');
var nativeModuleManager = NativeModules.XYRCTBrigeModule;

class SettingsView extends React.PureComponent{

    constructor(props){
        super(props);
    }
    .....
    .....

在Native中使用RCTRootView用作CR-VN模块的容器。全数通过HighlanderN渲染出来的视图都会突显在该View上。

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  {{< hl-text green >}}//设置获取JavaScript文件的路径,从服务器或者本地文件获取{{< /hl-text >}}
#if DEBUG
  jsCodeLocation = [NSURL URLWithString:@"http://10.0.30.119:8081/index.ios.bundle?platform=ios"];
#else
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#endif

  {{< hl-text green >}}//通过URL、模块名称加载对应的RN视图,生成一个OC对象`RCTRootView`,最后将该View添加到controller的View上{{< /hl-text >}}
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"TabberView"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

到此处就成功了叁个轻巧React Native App的购并。

  • 使用 CocoaPods 安装 React Native 依赖

星彩网app下载 9image

测试

  1. 因为HTTPS的限制,请将Domain添加到Info.plist的白名单
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>
  1. 执行npm start翻开本地服务
  2. Xcode run.

现实怎么设置/使用 CocoaPods 此处就不陈诉了,iOS 开荒人士应该都会,如若不会的话,请自行 Google

3、接下去使用npm来安装React和React-Native模块,请展开终端/命令提示行,步入项目目录中(既满含package.json文件的目录),然后运转下列命令来设置:

沾满 Podfile 文件内容:

星彩网app下载 10image

pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # 如果RN版本 >= 0.45则加入此行 'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单 'RCTText', 'RCTNetwork', 'RCTWebSocket', # 这个模块是用于调试功能的 'RCTAnimation', 'RCTActionSheet', 'RCTImage', 'RCTVibration', 'RCTSettings', 'RCTGeolocation', 'RCTLinkingIOS' ] # 如果你的RN版本 >= 0.42.0,则加入下面这行 pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga" # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖 pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

安装CocoaPods

试行命令安装 Pod

4、然后就是设置cocoapods了,可参照

pod install

把React Native增加到你的施用中

安装好后如图所示:

配置CocoaPods的依赖

星彩网app下载 11目录结构星彩网app下载 12目录结构

5、未来正是急需在cocoapods的Podfile中钦命大家所须求私用的组件,在成立Podfiel文件的时候,必要钦赐具体安装哪些react-native的重视库,所内定的每一个库就变成一个subspec,可用的subspec都列在node_module/react-native/React.podspec中。一般的话都以率先必要增多Core,这一subspec带有了总得的AppRegistry、StyleSheet、View以及别的的部分React Native大旨库。借使您想利用React Native的Text库,那就须求加多RCTText的subspec。同理,Image须要步入RCTImage,等等。

  • 代码集成

我们须求在Podfile文件中钦点所需的subspec。创设Podfile的最简便的格局正是在/ios子目录中利用CocoaPods的init命令:

RNDemo目录下开创三个 index.ios.js 文件,然后在 Xcode 中动用RCTRootView加载界面即可,此处可参看官方 demo,不再陈诉

在选择pod init时会遭遇如下难点:

  • 运行 Debug版本 测试

星彩网app下载 13image

我们供给如此去做:

1.Xcode 配置允许访问网络

星彩网app下载 14image

星彩网app下载 15image.png

接下来Podfile文件就创办成功了;

2. 启动本地服务npm start3.运行应用# 在项目的根目录中执行 本例为 RNDemoreact-native run-ios

Podfile会创设在实践命令的目录中。你须要调动其内容以满足你的三合一要求。调度后的Podfile的剧情看起来好像上面那样:

Tip

  • 行业内部颁发时,若无是CodePush 可能第三方热更新服务来讲,必要将 js 文件index.ios.js 打包成 jsbundle 集成到 Xcode 项目中
react-native bundle --entry-file inde.ios.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/#expreact-native bundle --entry-file xxx.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/
# 'node_modules'目录一般位于根目录中#但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`pod 'React', :path => 'RN_Peter_Test/node_modules/react-native',:subspecs => ['Core','DevSupport', #如果RN版本>= 0.43,则需要加入此行才能开启开发者菜单'RCTText','RCTNetwork','RCTWebSocket',‘BatchedBridge’#这个模块是用于调试功能的#在这里继续添加你所需要的模块]#如果你的RN版本>= 0.42.0,则加入下面这行pod“yoga", :path=> "RN_Peter_Test/node_modules/react-native/ReactCommon/yoga"end

Tip 会持续更新...

‘BatchedBridge’#纪念不要遗忘那几个模块,不然项目运营起来会报错,可参看

小心:”Yoga”这里不知何故,倘使Y大写,会报错,改成’yoga’就能够

创办好了Podfile后,pod install就能够开始安装React Native的pod包了。

代码集成

6、接下去就是项目代码的合龙专业,首先在品种根目录下开创一个空的index.js文件。(注目的在于0.49版本在此以前是index.ios.js文件),如图:

星彩网app下载 16image

7、在index.js中增加你自个儿的零件。这里大家只是简短的拉长三个组件,然后用一个含有样式的零部件把它包起来,复制如下代码到index.js中:

importReactfrom'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';classRNHighScoresextendsReact.Component{render() {varcontents =this.props["scores"].map(score =>{score.name}:{score.value}{"n"});return (2048 HighScores!{contents});}}const styles = StyleSheet.create({container: {flex: 1,justifyContent:'center',alignItems:'center',backgroundColor:'#FFFFFF',},highScoresTitle: {fontSize: 20,textAlign:'center',margin: 10,},scores: {textAlign:'center',color:'#333333',marginBottom: 5,},});//整体js模块的名称AppRegistry.registerComponent('MyReactNativeApp',() => RNHighScores);

MyReactNativeApp是完好js模块(即你持有的js代码)的称呼。你在iOS原生代码中增多React Native视图时会用到那么些称呼。

调整宗旨科学和技术:RCTRootView

8、打开ios工程,如图:

星彩网app下载 17image

效果与利益如下:

星彩网app下载 18image

运行Packager

要运维应用,首先供给运营开辟服务器(即Packager,它担任实时监测js文件的改变并实时打包,输出给客商端运转)。具体只需轻便步向到品种根目录中,然后运转:npmstartPackager只是在开辟时要求,便于你飞快支付迭代。在行业内部透露应用时,全部的js文件都会被打包为一整个jsbundle文件离线运转,此时客商端不再供给Packager服务。

运作应用

比如你使用的是Xcode,那么照常编写翻译和周转应用就能够。要是您未曾选取Xcode(不过你仍旧必得安装Bcode),则足以在指令行中使用以下命令来运营应用:

$ react-native run-ios

星彩网app下载 19image

假如项目运作不起来,试试适配ios9互联网访问:

星彩网app下载 20image

在项目info中添加

星彩网app下载 21image

NSAppTransportSecurityNSTemporaryExceptionAllowsInsecureHTTPLoads

星彩网app下载 22image

到此甘休,大家集成完成,大家不要紧自个儿出手也尝尝一下。。。

本文由星彩网app下载发布于计算机编程,转载请注明出处:原生项目并入,Native到已有的种类

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。