React Native 模块的开发和使用(iOS )环境搭建模块创建测试 Demo

56 阅读 0 评论 37 点赞

我是靠谱客的博主糊涂未来，最近开发中收集的这篇文章主要介绍React Native 模块的开发和使用(iOS )环境搭建模块创建测试 Demo，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文讲述的是在 mac OS 上如何将 iOS 的逻辑模块封装为 RN 可用的 module

环境搭建

Installing dependencies

You will need Node, Watchman, the React Native command line interface, and Xcode.

While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.

Node, Watchman

We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew install node
brew install watchman

If you have already installed Node on your system, make sure it is Node 8.3 or newer.（此处建议使用8的版本）

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

The React Native CLI

Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Terminal:

npm install -g react-native-cli

If you get an error like Cannot find module 'npmlog', try installing npm directly: curl -0 -L https://npmjs.org/install.sh | sudo sh.

Xcode

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

If you have already installed Xcode on your system, make sure it is version 9.4 or newer.

模块创建

首先介绍一下，RN自定义模块的目录结构为：

-android
-ios
-index.js
-package.json

-README.md

其中，
android：Android平台的原生代码
ios：iOS 平台的原生代码
index.js：自定义模块的入口（还有一种方式是定义 index.ios.js 和 index.android.js来分别作为对应平台的入口）
package.json：自定义组件的npm包信息

README.md：相关文档说明

开始进入正题(整个过程中不要关闭终端)：

Step 1，打开Mac的终端，创建一个 RN 的项目:

react-native init DemoProject

Step 2，进入项目目录，执行创建Lib的命令

cd DemoProject/
react-native new-library --name "DemoLib"

注意：进入拥有 RN 工程的目录下(必须)，不然会报错：

Command new-library unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

创建命令做了以下两件事情：

在 DemoProject/ 目录下，创建一个 Libraries/ 目录
把上面创建的 DemoLib 放在 Libraries/ 下面

Step 3，进入 Libraries/DemoLib/ 目录下，发现有一个工程文件 DemoLib.xcodeproj，打开它，实现 iOS 静态库的逻辑,并将 Objective-C的API 导出为 RN 能识别和使用的接口，具体可以参照文末的Github

具体语法参照：https://facebook.github.io/react-native/docs/native-modules-ios

Step 4，在上一步完成之后，在终端进入 DemoProject 目录下执行安装上一步创建的 iOS 模块的命令

npm install <library-with-native-dependencies> --save

<library-with-native-dependencies>是你的DemoLib.xcodeproj所在的那一级目录

这一步很有可能会删除原来项目依赖的 node_module，不要担心，下面可以安装回来

Step 5，自动链接

在终端，进入到 DemoProject 目录下，执行命令：

react-native link

如果提示：

Command `link` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

则需要执行命令：

npm install // 此步就是将上面丢失的 node module 重新安装回来
react-native link // 再次执行链接

执行成功的结果信息：

Scanning folders for symlinks in <#path#>/DemoProject/node_modules (10ms)
rnpm-install info Linking DemoLib ios dependency 
rnpm-install info Platform 'ios' module DemoLib has been successfully linked

测试 Demo

Step 1，导入上述的 Lib 模块，并实现 API 调用

在 DemoProject目录下打开 App.js文件，在合适的位置填写如下代码：

import {NativeModules} from 'react-native';
var demolib = NativeModules.DemoLib;
demolib.test();

2. 启动模拟器运行 RN App

查看本地可用模拟器 identifier 和 name 的列表，在终端执行以下命令：

xcrun simctl list devices

使用启动命令，指定模拟器进行 RN App 调试

react-native run-ios --simulator "iPhone 7 Plus”

修改 RN 默认的模拟器：

打开<RN Project root>/node_modules/react-native/local-cli/runIOS/runIOS.js，找到

{
    command: '--simulator [string]',
    description: 'Explicitly set simulator to use',
    default: 'iPhone 6', // 将这个默认的模拟器修改为指定的模拟器名字，例如default: 'iPhone X'
}

具体实现的Demo可以参照：RN Demo