iOS项目中集成React Native

2018-06-27 本文已影响23人末上

一.首先来搭建React Native环境

安装Homebrew
安装NodeJS
安装yarn
安装Watchman
Xcode
测试

1.安装Homebrew

Homebrew,Mac系统的包管理器(套件管理工具)，可以用来安装NodeJS及其他的软件并对他们进行管理

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

如果homebrew在安装软件时可能会碰到/usr/local/目录不可写的权限问题。可以使用下面的命令来修复：

sudo chown -R `whoami` /usr/local

2.安装NodeJS

安装node

brew install node

设置npm镜像用来加速后面软件的安装。

npm config set registry https://registry.npm.taobao.org --global

或者:

npm config set disturl https://npm.taobao.org/dist --global

3.安装yarn

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务

npm install -g yarn react-native-cli

安装完yarn同样也要设置镜像

npm config set registry https://registry.npm.taobao.org --global

或者:

npm config set disturl https://npm.taobao.org/dist --global

如果出现EACCES: permission denied的权限报错，修复/usr/local目录的所有权:

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以使用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

4.安装Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

5.安装Xcode（App Store下载）

6.测试

安装好了上面的软件之后，来进行：

在mac的根目录创建一个myRNProject的文件夹

react-native init myRNProject

不带版本号创建的是最新版本的RN

指定版本创建

react-native init myFirstRNProject --version 0.50

提示如下：

屏幕快照 2018-07-03 下午2.06.37.png
根据提示启动我们需要的iOS部分项目

cd /Users/zl/myRNProject
react-native run-ios

或者直接打开

屏幕快照 2018-07-03 中myRNProject.xcodeproj文件来启动

注意：启动之后，Mac会自动开启一个终端的对话框，这个对话框在项目的开启期间必须要一直打开着，如果被关闭，整个项目也就被关闭了。
如果一切正常，说明项目就是创建成功了
对话框：

屏幕快照 2018-07-03 下午2.17.15.png

项目文件夹：

屏幕快照 2018-07-03 下午2.13.49

新版本在 APP.JS文件夹中进行中编码。
如果是049之前的版本，在 index.js中。

二.搭建Xcode项目集成环境

1.在mac电脑桌面上touch命令创建一个空的文件夹iOS-RN

2. 在 iOS-RN 文件夹中，创建一个/ios文件

在/ios文件中将存放原生项目中所有的文件。直接将原生项目中的文件复制一份拷贝过来即可

3. 安装JavaScript依赖包: package.js文件

在项目根目录(和/ios平级)下创建一个名为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.0.0-alpha.6",    //  指定了React 版本
    "react-native": "0.51"    //这里指定了RN的版本
  }
}

scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库

安装依赖包：

$ npm install

4.在原生项目中使用CocoaPod添加RN依赖文件

使用终端cd进入到/ios文件中，安装CocoaPod依赖包管理系统。（这里推荐使用CocoaPods，如果之前的原生项目中没有安装的话，需要自行想办法安装一个）。
对于已经安装了CocoaPod 的项目，我们进入到对应的podfile文件

$ vim podfile

在podfile文件中添加以下内容：

# '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"`
 # 这里注意： 如果是0.49以下的RN，则使用下面这条：
 ` 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'

更新Pod

$ pod install

更新成功之后，我们在项目中就可以通过import React使用React提供的库文件了。

三、桥接RN和iOS项目中的内容

使用RN写一个“欢迎来到联盟” 的界面，然后在原生的项目中使用这个界面:

1. 创建index.js文件

在和ios文件夹平级的目录下（根目录），使用

$ touch index.js

创建index.js文件(RN的入口文件)，如果是版本 0.49之前的RN，那么应该创建index.ios.js文件

2. 在index.js文件写入测试代码：

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

class LauchView extends React.Component {
  render() {
    var contents = this.props.rootTag;
    return (
      <View style={styles.center}>
        <Text >
          {this.props.content}
        </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  center: {
    marginTop: 50,
    width:120,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:"red"
  },
});

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

上面代码的意思是页面上创建了一个包含“Hello World”文字的<text>控件

3.编写原生代码对接RN

在AppDelegate文件中，将RN编写的“Hello world”界面设置成window的根视图。

导入import React,然后didFinishLaunchingWithOptions函数中：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        self.window = UIWindow.init(frame: CGRect.init(x: 0, y: 0, width: ScreenWidth, height: ScreenHeight))
        self.window?.makeKeyAndVisible()

//      如果是真机调试，使用电脑的IP地址。
//      let url = URL.init(with: "http://192.168.0.174:8081/index.bundle?platform=ios")   

//     如果使用模拟器，可用本地服务器的端口。
        let url = URL.init(with: "http://localhost:8081/index.bundle?platform=ios")
        let rootView = RCTRootView.init(bundleURL: url, moduleName: "LauchView", initialProperties: [ "content":"Hello world"], launchOptions: nil)
        let VC = UIViewController.init()
        VC.view = rootView
        self.window?.rootViewController = VC
        return true
    }

注意：

LauchView 的名称必须和RN中注册的名称一模一样。不然会无法识别的。
这段代码的意思就是从RN中加载一个页面（这个页面就是我们写的“Hello world”页面），然后作为window的根视图展示

4. 启动RN项目

使用终端，cd 进入到项目的根目录，就是上面说的 iOS-RN文件夹，在这里可以看到 index.js文件。
输入命令行：

$ npm start

RN项目开始启动，终端框中看到提示：Loading dependency graph, done.，说明RN启动完成。注意:

不要关闭这个终端，如果需要使用终端执行其他的命令，可以新建窗口。
至此，所有的RN依赖库都加载完毕，可以在Xcode使用了

5.运行Xcode

选择模拟器，comand+R

react native 官网指南