博客> 手动集成react native 框架两种方法(网上的大多有问题)
手动集成react native 框架两种方法(网上的大多有问题)
2019-08-17 09:16 评论:0 阅读:514 诸葛亮倒骑小毛驴
Native 手动集成react 框架两种方法(网上的大多有问题)

手动集成react native 框架前提条件:react native 环境已经搭建好了,如果没有,请移步 Enter your link description here: 搭建环境

网上查了半天,好多都是错的,自己简单整理一下

一.项目拖拽集成

  1. 项目根路径 新建一个package.json 文件 ,文件内容为: { "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "16.3.1", "react-native": "0.55.3" } }

dependencies中react版本和react-native版本一定要对应上,否则会出错

2. 执行"npm install",会在当前目录(reactnative)生成node_modules子目录,里面包含react-native包含的所有包:  1.png

  1. 在reactnative目录下新增index.js文件:一个hello world import React, { Component } from 'react'; import { AppRegistry, View, Text, } from 'react-native';

export default class testClass extends Component {

render() { return (

hello world
    );

} }

AppRegistry.registerComponent('YCProductRN',() => testClass);

4.手动集成react-native框架  2.png  3.png  4.png 我在项目中集成如下几个框架:  5.png

5.添加相关frameworks文件:集成了哪几个,就添加哪几个frameworks  6.png

6.在Edit Scheme的Build中添加React:如果添加的React是这种React(misssing),删除React重新添加  7.png

7.环境配置环节 1).Build Settings 的 Other Linker Flags设置为-ObjC -lc++  8.png 2).Build Settings 的 Header Search Paths设置为$(SRCROOT)/node_modules/react-native/React路径,并设置为 recursive。  9.png

7.项目引用react native 库  10.png

8.添加网络许可 info.plist 中 添加App Transport Security Settings Allow Arbitrary Loads YES  11.png

这种项目集成就算成功了

二.Git项目集成 1.首先创建一个空目录用于存放React Native项目,然后在其中创建一个/ios子目录,把你现有的iOS项目拷贝到/ios子目录中。

  1. 安装JavaScript依赖包 在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内容:

{ "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "16.3.1", "react-native": "0.55.4" } } 注意的是, "dependencies": { "react": "16.3.1", "react-native": "0.55.4" } 依赖中的两个版本必须要对应,若果一个高一个低,就行出问题

终端 :$ npm install 执行安装React和React Native模块,安装好的node_modules/模块,不要在对它有任何操作

3.安装CocoaPods ,若果没有安装,请移步: Enter your link description here:

4.配置CocoaPods的依赖 1).在项目跟目中创建Podfile $ pod init 2).配置Podfile文件 platform :ios, '9.0'

target 'YCManual' do

// 'node_modules'目录一般位于根目录中 // 但是如果你的结构不同,那你就要根据实际路径修改下面的:path pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # 如果RN版本 >= 0.45则加入此行 'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单 'RCTText', 'RCTNetwork', 'RCTWebSocket', # 这个模块是用于调试功能的 // 在这里继续添加你所需要的RN模块 ] // 如果你的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'

end

值得注意的是:路径一定一定要看好,别添加错了

 12.png

3).安装pods 组件 pod install

5.在项目根目录执行以下命令创建index.js文件 touch index.js

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

export default class testClass extends Component {

render() { return (

hello world
    );

} }

AppRegistry.registerComponent('YCProductRN',() => testClass);

6.react native 导入原生项目  14.png

7.添加网络许可 info.plist 中 添加App Transport Security Settings Allow Arbitrary Loads YES  11.png

收藏
1
sina weixin mail 回到顶部