原生应用集成react-native

2017-10-26 13:58:29 u012352203 阅读数 3251

       大楼不是一天所建成,是时间慢慢积累起来滴,原先用原生写的项目,没办法将项目中所有的代码都换成RN,而且我也不认为全换成RN就是好的,所以准备先将项目中的一些页面改成RN开发。由于我们并没有使用Cocoapods,因为Cocoapods管理第三方依赖的时候会自动创建一些目录,不便整个团队的管理。本篇文章记录了在已经创建好的原生项目上集成react-native的过程。

前提:电脑已经安装过React-Native相关环境。


一、创建工程

我在桌面创建了一个工程,命名RNTest。

下面我使用Xcode创建一个新的项目作为我们原生的ios项目:

打开Xcode -> Create a new Xcode project -> Single View Application ->RNtest


 创建工程

二、添加package.json文件

在RNTest目录下创建一个package.json。


package.json

三、安装react-native模块

在终端cd到项目目录,然后执行 npm install。



四. 创建 index.ios.js(js文件入口)

在RNtest文件夹里创建index.ios.js文件,作为js文件入口。


五、手动集成react-native框架

1.添加react-native工程文件

由于项目没有使用Cocoapods进行第三方依赖包管理,所有我们需要手动将react-native工程包添加到我们的原生ios工程中。打开RNtest/node_modules/react-native目录,找到相关的项目包,将React相关的工程包手动添加到项目中:

由于要拉的东西比较多也比较杂,首先先拉React.xcodeproj文件。(路径如图)



在集成node_modules/react-native/Libraries下的文件


2.添加相关frameworks文件

接下来要将相关的frameworks文件添加到工程中,RNtest -> TARGETS -> RNtest -> Build Phases -> Link Binary Width Libraries


最后别忘了加上libstdc++.tbd。

3.在Edit Scheme的Build中添加React

向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。




4.最后环境配置

Build Settings 的 Other Linker Flags设置为-ObjC

Header Search Paths设置为$(SRCROOT)/node_modules/react-native/React路径,并设置为 recursive。


5、添加react-native应用

下面我们在原生ios应用中添加一个视图容器,用于展示react-native实现的内容。

在原生ios应用添加容器视图我们在工程文件下创建一个名为ReactView的UIView文件:ReactnativeIOS目录 -> 右键 -> New File -> Cocoa Touch Class -> ReactView,


6、更新App Transport Security

直接运行项目会报Could not connect to development server错误,在iOS 9以上的系统中,除非明确指明,否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做,在尝试通过http连接到服务器时,会遭遇这个错误 - Could not connect to development server.

打开工程中的Info.list文件,添加下面配置即可:



7.启动开发服务器

在运行我们的项目之前,我们需要先启动我们的开发服务器。进入RNtest目录,然后启动。$ react-native start


六、运行ios项目

通过Xcode点击项目或者command + R运行项目,如果顺利的话,就会看到成功运行的界面:


2017-06-02 12:36:45 yunkai666 阅读数 2428

这里默认电脑上已经安装了cocoapods和React-Native,如果没有RN开发环境,可以点击这里按照步骤配置。


0、新建项目

首先,先使用xcode新建一个项目,然后在项目的根目录下新建一个文件夹,用于存放RN的组件库还有其他一些文件。这里假设新建一个名为 RNComponent 的文件夹。目录结构为:

示图

1、新建RN配置文件

准备妥当以后,我们在 RNComponent 这个文件夹里就可以放置所有RN相关的文件。新建一个用户初始化RN的配置文件,是Json文件。命名为 package.json

示图

内容为:

{
  "name": "RNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "react-native-deprecated-custom-components": "^0.1.0",
    "react-native-tab-navigator": "^0.3.3"
  }
}

上述代码里的配置信息已经足够现在集成项目使用,如果需要了解其它配置信息的话,可以参考下方:

  • name 是指RN项目的名字,这个和原生项目的名字保持一致即可
  • version 是指项目版本号
  • description 项目的描述
  • author 开发者个人信息
  • private 当设置为true时,npm不会发布这个package
  • dependencies 指需要哪些依赖组件,并且指明版本号,这样用户安装时,会自动安装这些依赖组件
  • devDependencies 是指开发或测试的依赖组件,正式打包的时候不会打包到最终的生产包中
  • scripts 定义npm脚本命令,key值表示命令名,value值表示命令对应的脚本或者脚本路径
  • main 工程生成的package主入口点,当在 node 中调用 require(‘{module name}’) 时会 require 到这个文件
  • repostitory 如果我们这个工程是开源的,这个字段用来指明工程的仓库 URL 地址以及版本控制系统的类型,这可以方便其他开发者贡献代码
  • bugs 使用者可以提交bugs的 URL 或者邮件地址

文章结尾放了一些 package.json 的扩展内容,感兴趣的可以看看。

2、安装RN

编辑好 package.json 以后,我们来安装RN。这里需要确定当前目录是否为刚才新建的目录,并且确定 package.json 存在,然后,输入安装RN,在终端输入命令 npm install

示图

当出现下图,就说明安装成功,并且目录里多了一个 node_modules 文件夹。如图:

示图

示图

3、设置podfile文件

安装完毕以后,我们切换到xcode项目根目录中,然后再终端输入 pod init 命令,来生成podfile文件。如图:

示图

示图

4、使用pod管理依赖组件

生成 podfile 文件以后,直接编辑,编辑信息如下:

pod 'Yoga',  :path => './RNComponent/node_modules/react-native/ReactCommon/yoga'
  pod 'React', :path => ‘./RNComponent/node_modules/react-native/', :subspecs => [
 'Core',
  'ART',
  'RCTActionSheet',
  'RCTAdSupport',
  'RCTGeolocation',
  'RCTImage',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  'RCTVibration',
  'RCTWebSocket',
  'RCTLinkingIOS']

这里把所有组件全部做了依赖管理,所以在开发中,就需要根据实际需求来做对应的依赖。如果路径没有指定正确,就会报错,具体点击这里参考。

编辑好以后,直接在终端输入 pod install 命令,安装依赖。出现下图时,就说明安装成功:

示图

此时目录结构为:

示图

5、新建RN项目js文件入口

接下来需要在 RNComponent 文件夹中新建RN的js入口文件 index.ios.js ,这里直接复制RN初始化时的文件,内容如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,  //注册
  StyleSheet,   //样式
  Text,         //文本组件
  View,          //视图组件
  Image
} from 'react-native';

export default class RNApp extends Component {
    render() {
        return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                nethanhan
              </Text>
              <Text style={styles.instructions}>
                To get started, edit index.ios.js
              </Text>
              <Text style={styles.instructions}>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
              </Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
//注意这里的名字需要和项目名字一致
AppRegistry.registerComponent('RNApp', () => RNApp);

6、集成测试

完成所有工作以后,我们打开xcode项目,然后创建一个按钮,用于跳转到另外一个控制器,然后这个控制器直接把RN界面当成自己的view来展示。如图:

示图

RN模块的类是 RCTRootView ,实例化时需要传入相应的参数:

示图

然后在项目的plist文件中添加允许http连接声明,代码如下:

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

接下来在终端中切换到刚才的 RNCompoent 目录下,运行 react-native start 命令,如图:

示图

最后运行xcode项目,点击按钮,会跳转到RN界面的控制器里,就会出现RN的界面(第一次运行会慢一些),如图:

示图

OK! 至此,我们已经成功的把RN集成到IOS原生项目中。 如果有什么疑问,随时欢迎评论!

7、package.json扩展

我们在上方 package.json 中只配置了一些常用的信息,还有一些其它的说明,可以点击这里查阅。因为是属于npm的知识点,所以在这里放上一个真实项目的 package.json 的内容:

{
  "name": "module-name",
  "version": "10.3.1",
  "description": "An example module to illustrate the usage of a package.json",
  "author": "Your Name <you.name@example.org>",
  "contributors": [{
  "name": "Foo Bar",
  "email": "foo.bar@example.com"
}],
  "bin": {
  "module-name": "./bin/module-name"
},
  "scripts": {
    "test": "vows --spec --isolate",
    "start": "node index.js",
    "predeploy": "echo im about to deploy",
    "postdeploy": "echo ive deployed",
    "prepublish": "coffee --bare --compile --output lib/foo src/foo/*.coffee"
  },
  "main": "lib/foo.js",
  "repository": {
  "type": "git",
  "url": "https://github.com/nodejitsu/browsenpm.org"
},
  "bugs": {
  "url": "https://github.com/nodejitsu/browsenpm.org/issues"
},
  "keywords": [
  "nodejitsu",
  "example",
  "browsenpm"
],
  "dependencies": {
    "primus": "*",
    "async": "~0.8.0",
    "express": "4.2.x",
    "winston": "git://github.com/flatiron/winston#master",
    "bigpipe": "bigpipe/pagelet",
    "plates": "https://github.com/flatiron/plates/tarball/master"
  },
  "devDependencies": {
    "vows": "^0.7.0",
    "assume": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
    "pre-commit": "*"
  },
  "preferGlobal": true,
  "private": true,
  "publishConfig": {
  "registry": "https://your-private-hosted-npm.registry.nodejitsu.com"
},
  "subdomain": "foobar",
  "analyze": true,
  "license": "MIT"
}
2017-01-10 19:37:39 w2322050 阅读数 2096

React-Native 集成到现有项目实践

Xcode,Ios
需要安装过React-Native相关环境和cocoa pods。

准备工作:

React Native 借助 Node.js,即 JavaScript 运行时来创建 JavaScript 代码。如果你已经安装了 Node.js,那就可以上手了。

首先,使用 Homebrew 官网提供的指引安装 Homebrew,然后在终端执行以下命令:

1
brew install node

接下来,使用 homebrew 安装 watchman,一个来自Facebook 的观察程序:

1
brew install watchman

通过配置 watchman,React 实现了在代码发生变化时,完成相关的重建的功能。就像在使用 Xcode 时,每次保存文件都会进行一次创建。

STEP 1 : 安装node_modules包

创建package.json文件在项目的根目录下,这是为工程添加依赖库。里面有工程的版本信息和所需要的依赖库,第三方库等

{
  "name": "YourProjectName",
  "version": “1.0.0",
  "private": true,
  "scripts": {
    "start": "node ./node_modules/react-native/local-cli/cli.js start"  
  },
  //所需要的库
  "dependencies": {
    "react": "15.4.0",
    "react-native": “0.39.0",
    "react-native-looped-carousel": "0.0.12”,// 组件
  }
}

注意上面的 /node_modules/react-native这个路径,保持一致

然后在项目的根目录下运行

npm install

安装package.json中所需要的库。完成后在项目根目录下会生成一个node_modules文件夹

STEP 2: pod所需要的库到工程

创建podfile文件,利用Cocoapods安装podfile中所涉及到的库。

target 'YourProjectName' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText’,’RCTNetwork’,
    'RCTWebSocket',
  ]
end

注意上面的 /node_modules/react-native 这个路径,保持一致

然后进行 pod install 安装库

pod install

STEP 3: 创建index.iOS文件

在根目录下创建index.ios文件,写一个简单的textview

注意index.ios的存放位置

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


class SimpleApp extends React.Component {
  render() {
    return <View style={styles.container}>
        <Text style={styles.container1} > This is a simple application.</Text>
      </View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'green'
  },
  container1: {
    flex: 1,
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'green',
    color: 'red'
  }

});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp就是你的模块名,这个在后面会要用到。

STEP 4:添加到原生项目

往应用里添加容器视图

你需要添加一个容器视图来容纳React Native组件。它可以是你应用里任何的UIView。
不过,为了让代码更整洁,我们可以派生一个UIView,取名ReactView。打开你的Yourproject.xcworkspace来创建一个新的ReactView类(你也可以取任何你想要的名字!)

// ReactView.h

#import <UIKit/UIKit.h>
@interface ReactView : UIView
@end

在想要管理这个视图的视图管理器中,添加一个outlet然后连接它:

// ViewController.m

@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@end

往容器视图里添加RCTRootView

准备好开始最有意思的部分了吗?现在我们要创建RCTRootView来包含你的React Native应用。

在ReactView.m中,我们需要先使用你的index.ios.bundle的URI来初始化RCTRootView。index.ios.bundle会由packager服务创建,可以通过React Native服务器访问到。我们会在后面讨论这个问题。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
//   NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//
// generated by "Bundle React Native code and images" build step.
//
//   curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName: @"SimpleApp"
                                                 launchOptions:nil];

然后把它添加为ReactView的子视图。

[self addSubview:rootView];
rootView.frame = self.bounds;

启动开发服务器。

在工程的根目录下,我们可以开启React Native开发服务器:

(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)

这条命令会启动一个React Native开发服务器,用于构建我们的bundle文件。--root选项用来标明你的React Native应用所在的根目录。在我们这里是ReactComponents目录,里面有一个index.ios.js文件。开发服务器启动后会打包出index.ios.bundle文件来,并可以通过http://localhost:8081/index.ios.bundle来访问。

这里有个坑,在模拟器调试的时候,要将上面的http://localhost:8081/index.ios.bundle 替换为http://127.0.0.1:8081/index.ios.bundle
原因之一:做本地局域网开发环境,大部分都会做服务器映射处理,localhost 被指向特定的IP 而不是本机的127.0.0.1, 就会出现这样的问题。


错误信息处理

error1: Invariant Violation:Application 项目名 has not been registered.

这个错误的原因是index.ios.js 中的注册名,和代码中的引用名不同;

index.ios.js 中

AppRegistry.registerComponent('Study', () => ReactTest);

ios 代码中引用

jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.102:8081/index.ios.bundle?platform=ios&dev=true"];

参考:React-Native坑1:Invariant Violation:Application 项目名 has not been registered.

error2: Could not connect to development server.

这个错误的原因是localost识别问题。解决方式一,修改host文件。方式二, 使用本机ip, 运行之前首先要启动npm start

参考:react native小试身手

React Native 运行出现 Could not connect to development server 解决方法

error3:Native module cannot be null

这个错误的原因是项目中使用的ReactNative模块没有加入到项目中,解决方式参考集成步骤中的5. 仔细检查自己的项目和报错信息。

参考:React-native, “Native module cannot be null”

使用链接库

RN 集成到IOS原生应用时,出现 Native module cannot be null原因?

error4:Undefined symbols for architecture x86_64: “std::terminate()”, referenced from

运行项目时Xcode报错。

解决办法:add -lc++ in Other Linker Flags in your xcode project build settings.

参考:undefined-symbols-for-architecture-x86-64-stdterminate-referenced-from

2018-09-13 16:29:00 weixin_30632089 阅读数 26

项目集成react-native参考官网文档 

 

cd 项目文件夹 

npm install -g react-native-update-cli (一台电脑只运行一次就行)

 

npm install --save react-native-update@具体版本(具体版本请参考下面的表格-安装事例:npm install --save react-native-update@5.x)

 

ReactNative版本 react-native-update版本 
 
React Native版本react-native-update版本
0.26及以下 1.0.x
0.27 - 0.28 2.x
0.29 - 0.33 3.x
0.34 - 0.45 4.x
0.46及以上 5.x

 

安装命令示例:npm install --save react-native-update@5.x

如果是纯react-native项目 直接按照文档集成即可  https://update.reactnative.cn/home

 

如果是RN植入到iOS原生项目,经测试link无用,用cocopods自动链接。(巨坑)

 

重点: 

cd到路径 node_modules->react-native-update创建react-native-update.podspec文件

 

执行: 

touch react-native-update.podspec

 

编辑react-native-update.podspec

(以下直接拷贝即可)

require "json"
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
Pod::Spec.new do |s|
s.name = "react-native-update"
s.version = package["version"]
s.summary = "hot update for react-native"
s.author = "author (https://github.com/reactnativecn)"
s.homepage = "https://github.com/reactnativecn/react-native-pushy"
s.license = "MIT"
s.platform = :ios, "7.0"
s.source = { :git => "https://github.com/reactnativecn/react-native-pushy.git", :tag => "#{s.version}" }
s.source_files = "ios/**/*.{h,m,c}"
s.libraries = "bz2"
s.dependency "React"
end

 

在Podfile文件中添加路径 

pod 'react-native-update' , :path => ‘../node_modules/react-native-update'

这样react-native-update即可集成在原有应用上,热更新实现参考文档即可

 

转载于:https://www.cnblogs.com/jasonTc/p/9641384.html

2018-05-31 14:07:56 u013773825 阅读数 832

大楼不是一天所建成,是时间慢慢积累起来滴,原先用原生写的项目,没办法将项目中所有的代码都换成RN,而且我也不认为全换成RN就是好的,所以准备先将项目中的一些页面改成RN开发。由于我们并没有使用Cocoapods,因为Cocoapods管理第三方依赖的时候会自动创建一些目录,不便整个团队的管理。本篇文章记录了在已经创建好的原生项目上集成react-native的过程。

前提:电脑已经安装过React-Native相关环境。


一、创建工程

我在桌面创建了一个工程,命名RNTest。

下面我使用Xcode创建一个新的项目作为我们原生的ios项目:

打开Xcode -> Create a new Xcode project -> Single View Application ->RNtest


 创建工程

二、添加package.json文件

在RNTest目录下创建一个package.json。


package.json

三、安装react-native模块

在终端cd到项目目录,然后执行 npm install。



四. 创建 index.ios.js(js文件入口)

在RNtest文件夹里创建index.ios.js文件,作为js文件入口。


五、手动集成react-native框架

1.添加react-native工程文件

由于项目没有使用Cocoapods进行第三方依赖包管理,所有我们需要手动将react-native工程包添加到我们的原生ios工程中。打开RNtest/node_modules/react-native目录,找到相关的项目包,将React相关的工程包手动添加到项目中:

由于要拉的东西比较多也比较杂,首先先拉React.xcodeproj文件。(路径如图)



在集成node_modules/react-native/Libraries下的文件


2.添加相关frameworks文件

接下来要将相关的frameworks文件添加到工程中,RNtest -> TARGETS -> RNtest -> Build Phases -> Link Binary Width Libraries


最后别忘了加上libstdc++.tbd。

3.在Edit Scheme的Build中添加React

向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。




4.最后环境配置

Build Settings 的 Other Linker Flags设置为-ObjC

Header Search Paths设置为$(SRCROOT)/node_modules/react-native/React路径,并设置为 recursive。


5、添加react-native应用

下面我们在原生ios应用中添加一个视图容器,用于展示react-native实现的内容。

在原生ios应用添加容器视图我们在工程文件下创建一个名为ReactView的UIView文件:ReactnativeIOS目录 -> 右键 -> New File -> Cocoa Touch Class -> ReactView,


6、更新App Transport Security

直接运行项目会报Could not connect to development server错误,在iOS 9以上的系统中,除非明确指明,否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做,在尝试通过http连接到服务器时,会遭遇这个错误 - Could not connect to development server.

打开工程中的Info.list文件,添加下面配置即可:



7.启动开发服务器

在运行我们的项目之前,我们需要先启动我们的开发服务器。进入RNtest目录,然后启动。$ react-native start


六、运行ios项目

通过Xcode点击项目或者command + R运行项目,如果顺利的话,就会看到成功运行的界面:


原文链接:https://blog.csdn.net/u012352203/article/details/78353044