ReactNative原生iOSUI组件拓展开发&发布

Author: Necfol

说明: 本文档用于指导前端React Native的原生iOSUI组件开发&发布,如需开发其他其他框架应用,不适用本文档

1
2
3
React Native已经封装了大部分最常见的组件,譬如ScrollView和TextInput,但不可能封装全部组件。
而且,说不定你曾经为自己以前的App还封装过一些组件,React Native肯定没法包含它们。
幸运的是,在React Naitve应用程序中封装和植入已有的组件非常简单。

RN官网上这么描述拓展原生UI组件开发封装,真的是日了狗,我在实践中遇到了不少问题,官网文档步骤并不全面,废话不多说,以下是依照官网示例中的mapview所做的实践教程。

1.原生组件环境

新建静态库

使用xcode新建静态库,即File->new->project->Cocoa Touch Static Library。
Cocoa Touch Static Library
我们给静态库取名为NativeUIExample。

新建RN项目

按照官网步骤新建一个RN项目

1
$ react-native init Dialogtest

新建好之后,打开RN项目中ios文件夹下的iOS工程

1
2
如果单独在项目外新建一个npm包,通过link来配置本地组件环境的话,我们新建的npm包需要依赖的环境和新建的RN项目基本相同,
并且我们开发静态库设置搜索路径Header Search Paths时与正式打包之后的路径不同,远不如模拟npm link方便。

在RN项目的node_modules文件夹下创建新的文件夹react-native-NativeUIExample,在新文件夹下新建ios文件夹

1
2
3
4
$ cd Dialogtest/node_modules
$ mkdir react-native-NativeUIExample
$ cd react-native-NativeUIExample
$ mkdir ios

将之前建好的静态库的内容copy到ios文件夹下
Dir

用xcode打开react-native-NativeUIExample/ios下的ios工程,在targets->Build Settings下找到Header Search Paths,设置其值为

1
$(SRCROOT)/../../react-native/React

并且选择设置recursive
recursive

将react-native-NativeUIExample文件夹下的NativeUIExample工程拖到RN项目的iOS工程中的Library中

Library

选中 TARGETS => Dialogtest => Build Phases => Link Binary With Libraries,添加libNativeUIExample.a这个静态库(注意:如果找不到这个静态库,就cmd+k,clean一下,还不行就重启xcode,多试几次就行😊)

LinkBinaryWithLibraries

现在我们已经把环境搭建好了,模拟了npm link了

2.开发原生组件

这里我们只是将官网的mapview组件示例展现部分开发一下,其余的开发组件相关内容可以参考官网

  • 在Dialogtest iOS工程Libraries的NativeUIExample.m中,添加RCT_EXPORT_MODULE(NativeUIExample)标记宏
  • 实现-(UIView *)view方法

RCT_EXPORT_MODULE(NativeUIExample) 括号里即是暴露给js使用的组件名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//
// NativeUIExample.m
// NativeUIExample
//
// Created by necfol on 3/21/18.
// Copyright © 2018 Necfol. All rights reserved.
//

#import <MapKit/MapKit.h>

#import "RCTViewManager.h"

@interface NativeUIExample : RCTViewManager
@end

@implementation NativeUIExample

RCT_EXPORT_MODULE(NativeUIExample)

- (UIView *)view
{
return [[MKMapView alloc] init];
}

@end

现在我们原生组件已经开发完成了,那么我们Javascript如何调用呢?

在我们RN项目App.js文件中编写代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {
Platform,
StyleSheet,
Text,
View,
requireNativeComponent
} from 'react-native';
let NativeUIExample = requireNativeComponent('NativeUIExample', null);
//...其余代码
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<NativeUIExample style={styles.test}/>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}

注意:我们需要给NativeUIExample这个组件加上宽高,否则并不能显示地图

在我们的RN项目中运行命令

1
$ react-native run-ios

此刻即可看到原生组件被我们通过js的形式显示出来了。

end

3.发布

接下来就是我们熟悉的发布npm了

在github上创建一个仓库react-native-NativeUIExample,然后关联到我们前面创建的react-native-NativeUIExample目录

1
2
3
$ cd Dialogtest/node_modules/react-native-NativeUIExample
$ git init .
$ git remote add origin git@github.com:necfol/react-native-NativeUIExample.git

在react-native-NativeUIExample目录下创建一个index.js,它是整个原生模块的入口,我们这里只是将原生进行导出

1
2
3
4
5
import {
requireNativeComponent
} from 'react-native';
var NativeUIExample = requireNativeComponent('NativeUIExample', null);
module.exports = NativeUIExample;

在react-native-NativeUIExample文件夹下运行命令

1
$ npm init

输入相应的信息,package.json就创建完成了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "react-native-nativeuiexample",
"version": "1.0.0",
"description": "my RN native module demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/necfol/react-native-NativeUIExample.git"
},
"author": "Necfol",
"license": "ISC",
"bugs": {
"url": "https://github.com/necfol/react-native-NativeUIExample/issues"
},
"homepage": "https://github.com/necfol/react-native-NativeUIExample#readme"
}

接下来我们就可以

1
npm publish

4.使用

新建一个RN项目,依次运行:

1
2
3
$ npm install --save react-native-nativeuiexample
$ npm install
$ react-native link

在App.js中新增代码:

1
2
3
import NativeUIExample from 'react-native-nativeuiexample';
<!--在render中-->
<NativeUIExample style={styles.test} />

运行:

1
$ react-native run-ios

Demo可参考示例

官方文档中还有属性,事件之类用法,暂不做介绍。

分享到