ReactNative: 将自定义的ReactNative组件制做成第三方库的详细流程(制做-->发布)

1、简介

在讲本篇博文以前，须要你熟知怎么自定义ReactNative组件，而后才好学习将自定义的ReactNative组件制做成第三方库。本文中的自定义的ReactNative组件LoginManager API 源自上篇文章，因此须要先看一下上篇博文。言归正传，ReactNative的确提供了一个很是便捷的方式来扩展Native模块。若是要把模块作成第三方组件的话，还有一些工做要作：首先以一个静态库工程来编译模块代码，提供JavaScript的封装，最后建立Package.json来支持node的引用。在步骤开始以前，我先把上篇文章中建立Native原生模块的LoginManager API组件的类贴出来，以下所示：

LoginManager.h

//
// LoginManager.h // RNDemo //
// Created by 夏远全 on 2020/1/16. // Copyright © 2020 Facebook. All rights reserved. // 
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <React/RCTUtils.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTBridgeModule.h> NS_ASSUME_NONNULL_BEGIN //OC中定义一个枚举并导出
typedef NS_ENUM(NSInteger, MoveDiretion){ MoveDiretionNone, MoveDiretionLeft, MoveDiretionRight, MoveDiretionBottom, MoveDiretionTop }; @interface LoginManager : NSObject<RCTBridgeModule>

@end NS_ASSUME_NONNULL_END

View Code

LoginManager.m

//
// LoginManager.m // RNDemo //
// Created by 夏远全 on 2020/1/16. // Copyright © 2020 Facebook. All rights reserved. // 
#import "LoginManager.h"

#ifdef DEBUG #define NSLog(format, ...) printf("[%s] %s [第%d行] %s\n", __TIME__, __FUNCTION__, __LINE__, [[NSString stringWithFormat:format, ## __VA_ARGS__] UTF8String]);
#else
#define NSLog(format, ...)
#endif

@implementation LoginManager //初始化, 添加屏幕旋转监听者
-(instancetype)init { self = [super init]; if (self) { [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationDidChange:) name:UIDeviceOrientationDidChangeNotification object:nil]; } return self; } //导出模块类
RCT_EXPORT_MODULE(); //重映射，auth为code方法的新名称
RCT_REMAP_METHOD(auth,code:(NSString *)account{ NSLog(@"%s---获取验证----",__func__); NSLog(@"account----%@",account); }); //login为方法名
RCT_EXPORT_METHOD(login:(NSString *)account password:(NSString *)password{ NSLog(@"%s---登陆帐号----",__func__); NSLog(@"account----%@",account); NSLog(@"password----%@",password); }); //logout为方法名
RCT_EXPORT_METHOD(logout:(NSString *)account{ NSLog(@"%s---退出帐号----",__func__); NSLog(@"account----%@",account); }); //设置普通的回调函数 //fetchUserInfoWithToken为方法名，successCallback为成功回调，failureCallback为失败回调
RCT_EXPORT_METHOD(fetchUserInfoWithToken:(NSString *)token success:(RCTResponseSenderBlock)successCallback failure:(RCTResponseErrorBlock)failureCallback { if(token.length>0 && successCallback){ successCallback(@[ @"account = xiayuanquan", @"password = 123456", [NSString stringWithFormat:@"token = %@",token] ]); } else{ if(failureCallback){ failureCallback( [[NSError alloc] initWithDomain:NSOSStatusErrorDomain code:404 userInfo: @{NSLocalizedDescriptionKey: @"token exception"}] ); } } }); //设置异步处理的回调函数 //sendMessage为方法名，successCallback为成功回调，failureCallback为失败回调
RCT_EXPORT_METHOD(sendMessage:(NSString *)message success:(RCTPromiseResolveBlock)successCallback failure:(RCTPromiseRejectBlock)failureCallback { if(message.length>0 && successCallback){ successCallback(@"发送成功!"); } else{ if(failureCallback){ failureCallback(@"300",@"发送失败",nil); } } }); //重写constantsToExport, 枚举常量导出
- (NSDictionary<NSString *, id> *)constantsToExport { return @{ @"MoveDiretionNone": @(MoveDiretionNone), @"MoveDiretionLeft": @(MoveDiretionLeft), @"MoveDiretionRight": @(MoveDiretionRight), @"MoveDiretionBottom": @(MoveDiretionBottom), @"MoveDiretionTop": @(MoveDiretionTop) }; } //定义一个移动方法，根据传入的枚举值移动 //move为方法名
RCT_EXPORT_METHOD(move:(MoveDiretion)moveDiretion{ switch(moveDiretion){ case MoveDiretionNone: NSLog(@"仍保持原始位置 --- MoveDiretionNome"); break; case MoveDiretionLeft: NSLog(@"向左边移动位置 --- MoveDiretionLeft"); break; case MoveDiretionRight: NSLog(@"向右边移动位置 --- MoveDiretionRight"); break; case MoveDiretionBottom: NSLog(@"向下边移动位置 --- MoveDiretionBottom"); break; case MoveDiretionTop: NSLog(@"向上边移动位置 --- MoveDiretionTop"); break; } }); //能够重写队列，给当前模块类指定自定义的串行队列。若不指定，则系统默认会给当前模块类随机分配一个串行队列。 //这个方法一旦重写。当前模块的全部方法均会在该自定义的串行队列中异步执行
-(dispatch_queue_t)methodQueue{ return dispatch_queue_create("com.facebook.ReactNative.LoginManagerQueue", DISPATCH_QUEUE_SERIAL); } //定义一个方法，获取线程和队列信息 //thread为方法名
RCT_EXPORT_METHOD(thread:(BOOL)newQueue{ const char *queueName = dispatch_queue_get_label([self methodQueue]); NSLog(@"当前线程1 ------- %@-----%s", [NSThread currentThread], queueName); if(newQueue){ dispatch_async(dispatch_get_main_queue(), ^{ const char *queueName2 = dispatch_queue_get_label(dispatch_get_main_queue()); NSLog(@"当前线程2 ------- %@ -------%s", [NSThread currentThread], queueName2); }); dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ const char *queueName3 = dispatch_queue_get_label(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0)); NSLog(@"当前线程3 ------- %@-------%s", [NSThread currentThread], queueName3); }); } }); //获取当前屏幕的尺寸
static NSDictionary *Dimensions(){ CGFloat width = MIN(RCTScreenSize().width, RCTScreenSize().height); CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height); CGFloat scale = RCTScreenScale(); if(UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation)){ width = MAX(RCTScreenSize().width, RCTScreenSize().height); height = MIN(RCTScreenSize().width, RCTScreenSize().height); } return @{ @"width": @(width), @"height": @(height), @"scale": @(scale) }; } //定义一个方法，获取屏幕信息 //getDimensions为方法名
RCT_EXPORT_METHOD(getDimensions:(RCTResponseSenderBlock)callback{ if (callback) { callback(@[[NSNull null], Dimensions()]); } }); //监听方法，使用RCTEventDispatcher的eventDispatcher调用sendDeviceEventWithName函数发送事件信息 //能够将事件名称做为常量导出，提供给ReactNative中使用，也即添加到constantsToExport方法中的字典中便可。相似上面的枚举。
@synthesize bridge = _bridge; -(void)orientationDidChange:(NSNotification *)notification { [_bridge.eventDispatcher sendDeviceEventWithName:@"orientationDidChange" body:@{ @"orientation": UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation) ? @"Landscape": @"Portrait", @"Dimensions": Dimensions()} ]; } //移除监听者
-(void)dealloc{ [[NSNotificationCenter defaultCenter] removeObserver:self]; } @end

View Code

RCTConvert+MoveDiretion.h

//
// RCTConvert+MoveDiretion.h // RNDemo //
// Created by 夏远全 on 2020/1/17. // Copyright © 2020 Facebook. All rights reserved. // 
#import <React/RCTConvert.h> NS_ASSUME_NONNULL_BEGIN @interface RCTConvert (MoveDiretion) @end NS_ASSUME_NONNULL_END

View Code

RCTConvert+MoveDiretion.m

//
// RCTConvert+MoveDiretion.m // RNDemo //
// Created by 夏远全 on 2020/1/17. // Copyright © 2020 Facebook. All rights reserved. // 
#import "RCTConvert+MoveDiretion.h"
#import "LoginManager.h"

@implementation RCTConvert (MoveDiretion) //给RCTConvert类添加扩展，这样在模块方法调用中使用常量导出的枚举值，通讯到Native中时，会从整型自动转换为定义的枚举类型
RCT_ENUM_CONVERTER(MoveDiretion,(@{ @"MoveDiretionNone": @(MoveDiretionNone), @"MoveDiretionLeft": @(MoveDiretionLeft), @"MoveDiretionRight": @(MoveDiretionRight), @"MoveDiretionBottom": @(MoveDiretionBottom), @"MoveDiretionTop": @(MoveDiretionTop), }), MoveDiretionNone, integerValue) @end

View Code

 

2、步骤

一、使用xcode建立一个名为LoginManager的静态库。

二、打开静态库，将上面贴出来的已经实现好了的Native模块LoginManager API组件的类所有拷贝进去或进行替换。

三、选择Build Settings，配置Header Search Paths路径。

6、打开终端，初始化一个新的RN项目，随意设置一个名称为：LoginManagerTestProject。（本人安装的ReactNative版本较低）

//初始化
react-native init LoginManagerTestProject --version 0.44.3

七、进入目录node_modules。

//进入node_modules
cd LoginManagerTestProject/node_modules

八、建立要制做的第三库文件夹，指定名称为：react-native-login-manager。

//建立第三方名称
mkdir react-native-login-manager

九、进入这个第三方库文件夹。

//进入库文件
cd react-native-login-manager

十、建立ios文件夹。

//建立ios文件
mkdir ios

十一、将以前建立的静态库中的根目录下的文件所有copy到这个RN工程LoginManagerTestProject/node_modules/react-native-login-manager/ios目录下。目录结构以下：

十二、使用xcode打开这个RN工程LoginManagerTestProject，将静态库LoginManager的.xcodeproj文件 拖到 RN工程LoginManagerTestProject的Libraries文件下。

1三、手动添加libLoginManager.a静态包，而后编译，若是编译不出错，则success。

1四、使用终端或者webStorm等编程工具进入到RN工程LoginManagerTestProject/node_modules/react-native-login-manager目录下，建立index.js文件，它是整个原生模块的入口，咱们这里只是将原生LoginManager模块类进行导出。此时也就完成了第三方库制做的第一步了，仅仅能够本身使用。 (还须要发布到npm上，分享给你们安装使用)

 

3、测试 

好了，咱先本身测试一下，看看行不行。结果是行的，😆。

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View } from 'react-native'; //使用自定义的react-native-login-manager第三方库的模块方法
import LoginManager from 'react-native-login-manager'; LoginManager.auth("xiayuanquan"); //使用LoginManager模块类的监听通知
const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); let subscription = RCTDeviceEventEmitter.addListener('orientationDidChange', (dimensions) => { Object.keys(dimensions).forEach(key => console.log(key, dimensions[key])); }); //subscription.remove();
 export default class LoginManagerTestProject extends Component { render() { return ( <View style={styles.container}>

            </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', } }); AppRegistry.registerComponent('LoginManagerTestProject', () => LoginManagerTestProject); 

运行的结果以下所示：标红部分确实打印出结果了。

2020-01-18 14:42:21.119 [info][tid:main][RCTBatchedBridge.m:77] Initializing <RCTBatchedBridge: 0x6000023cc1c0> (parent: <RCTBridge: 0x6000031c9490>, executor: RCTJSCExecutor)2020-01-18 14:42:21.173 [warn][tid:com.facebook.react.JavaScript][RCTModuleData.mm:220] RCTBridge required dispatch_sync to load RCTDevSettings. This may lead to deadlocks 2020-01-18 14:42:21.173562+0800 LoginManagerTestProject[89258:2044559] RCTBridge required dispatch_sync to load RCTDevSettings. This may lead to deadlocks [14:30:32] -[LoginManager code:] [第34行] -[LoginManager code:]---获取验证---- [14:30:32] -[LoginManager code:] [第35行] account----xiayuanquan 2020-01-18 14:42:21.391340+0800 LoginManagerTestProject[89258:2044406] Running application LoginManagerTestProject ({ initialProps = { }; rootTag = 1; }) 2020-01-18 15:20:51.450 [info][tid:com.facebook.react.JavaScript] 'Dimensions', { width: 375, scale: 2, height: 667 } 2020-01-18 15:20:51.450504+0800 LoginManagerTestProject[89634:2069334] 'Dimensions', { width: 375, scale: 2, height: 667 } 2020-01-18 15:20:51.451 [info][tid:com.facebook.react.JavaScript] 'orientation', 'Portrait' ...... 2020-01-18 15:21:08.148 [info][tid:com.facebook.react.JavaScript] 'Dimensions', { width: 667, scale: 2, height: 375 } 2020-01-18 15:21:08.149013+0800 LoginManagerTestProject[89634:2069334] 'Dimensions', { width: 667, scale: 2, height: 375 } 2020-01-18 15:21:08.149 [info][tid:com.facebook.react.JavaScript] 'orientation', 'Landscape' .....

注意事项，若是在xcode11运行时出现类型没法转换。多是因为RN低版本，Xcode11(iOS13)中对未使用的接口选择器的参数unused字符串属性进行了更改为了__unused__，致使ReactNative动态收集接口时不能把声明的接口进行导入，运行时没法查找到该接口致使的错误。错误以下：

2019-09-25 15:16:47.784 [error][tid:main][RCTModuleMethod.m:376] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type. 2019-09-25 15:16:47.784408+0800 example[68797:2090899] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.

解决办法是须要修改RCTModuleMethod类，找到RCTParseUnused静态函数，使用下面这段代码进行替换（第2行就是新添加的），以下所示：

static BOOL RCTParseUnused(const char **input) { return RCTReadString(input, "__unused") || RCTReadString(input, "__attribute__((__unused__))") || RCTReadString(input, "__attribute__((unused))"); }

 

4、发布

只有将第三方库发布到了npm上，能够提供给你们安装并进行使用，这才算是真正的第三方库。可是，在将第三方库发布到npm上以前，须要先拥有一个npm帐号。

一、查询是否拥有npm帐号

//查询
npm whoami //本人没有安装，因此错误以下
npm ERR! code ENEEDAUTH npm ERR! need auth This command requires you to be logged in. npm ERR! need auth You need to authorize this machine using `npm adduser` npm ERR! A complete log of this run can be found in: npm ERR! /Users/xiayuanquan/.npm/_logs/2020-01-18T07_37_42_133Z-debug.log

二、若没有则申请注册一个

//添加一个npm帐号
npm adduser //本人添加结果以下。 若是注册成功，npm官方会发来邮件，用户须要点击邮件进行验证。 "Verify your npm email address"。 必定要进行验证，不然发布没法成功。
Username: xiayuanquan Password: Email: (this IS public) 137xxxx7163@163.com Logged in as xiayuanquan on https://registry.npmjs.org/.

拥有了npm帐号后，咱们如今就能够来进行发布的步骤了。

一、进入RN项目，使用git命令在github上建立仓库react-native-login-manager，和咱们的第三方库进行关联。

//进入项目
cd /Users/xiayuanquan/Desktop/LoginManagerTestProject/node_modules/react-native-login-manager //git初始化
git init . //关联远程仓库
git remote add origin https://github.com/xiayuanquan/react-native-login-manager.git

二、仍然在LoginManagerTestProject/node_modules/react-native-login-manager目录下，建立一个package.json文件。发布到npm以前，必须有这个文件存在，它和index.js目录结构是平级的。package.json文件包含了module的全部信息，好比名称、版本、描述、依赖、做者、license等。 使用npm init -y命令来建立package.json，系统帮助完成各个信息的配置（也可使用npm init命令手动一步步输入配置信息）。

//建立pack.json配置文件
npm init -y //本人的配置结果以下
Wrote to /Users/xiayuanquan/Desktop/LoginManagerTestProject/node_modules/react-native-login-manager/package.json: { "name": "react-native-login-manager", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://gituhb.com/xiayuanquan/react-native-login-manager.git" }, "keywords": [], "author": "", "license": "ISC" }

三、若是采用系统帮助建立的pack.json不够完善，能够本身打开这个文件进行编辑。例如，若是咱们的第三方库须要依赖，能够手动添加一个dependencies属性。以下所示：pack.json

{ "name": "react-native-login-manager", "version": "1.0.0", "description": "this is a third part login library", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://gituhb.com/xiayuanquan/react-native-login-manager.git" }, "keywords": [], "author": "xiayuanquan", "license": "ISC", "dependencies": { }, } 

四、好了，pack.json配置完毕后。就能够将咱们的第三方库react-native-login-manager发布到npm上了。

//发布第三方库
npm publish

若是发布失败，出现以下错误，说明发布采用的镜像源不匹配 (有可能中途不当心切换过)。错误以下：

//错误日志以下
........ npm notice === Tarball Details === npm notice name: react-native-login-manager npm notice version: 1.0.0 npm notice package size: 18.8 kB npm notice unpacked size: 41.6 kB npm notice shasum: 3e576dbb0d45bcc5dd5796928abba724552ab724 npm notice integrity: sha512-NNKLeNL5XJk1l[...]RR+oP0IKtgYBw== npm notice total files: 11 npm notice npm ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npm.taobao.org/react-native-login-manager - [no_perms] Private mode enable, only admin can publish this module
npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy. npm ERR! A complete log of this run can be found in: npm ERR!     /Users/xiayuanquan/.npm/_logs/2020-01-18T08_08_46_345Z-debug.log

解决办法就是先切换源，而后登陆npm，再发布。本人采用nrm管理的源，因此使用nrm切换。nrm管理npm源请参看个人这篇文章，nrm管理npm源。方法以下：

//查看当前源
nrm current       //显示结果：taobao //切换源
nrm use npm       //显示结果：Registry has been set to: https://registry.npmjs.org/

//再查看
nrm current       //显示结果：npm //登陆npm
npm login        //显示结果： Username: xiayuanquan
 Password: Email: (this IS public) 137xxxx7163@163.com Logged in as xiayuanquan on https://registry.npmjs.org/. //从新发布
npm publish //此时，发布成功，结果以下
npm notice npm notice 📦 react-native-login-manager@1.0.0 npm notice === Tarball Contents === npm notice 587B ios/LoginManager/LoginManager.h npm notice 264B ios/LoginManager/RCTConvert+MoveDiretion.h npm notice 129B index.js npm notice 428B package.json npm notice 7.6kB ios/LoginManager/LoginManager.m npm notice 725B ios/LoginManager/RCTConvert+MoveDiretion.m npm notice 10.8kB ios/LoginManager.xcodeproj/project.pbxproj npm notice 238B ios/LoginManager.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist npm notice 347B ios/LoginManager.xcodeproj/xcuserdata/xiayuanquan.xcuserdatad/xcschemes/xcschememanagement.plist npm notice 20.4kB ios/LoginManager.xcodeproj/project.xcworkspace/xcuserdata/xiayuanquan.xcuserdatad/UserInterfaceState.xcuserstate npm notice 157B ios/LoginManager.xcodeproj/project.xcworkspace/contents.xcworkspacedata npm notice === Tarball Details === npm notice name: react-native-login-manager npm notice version: 1.0.0 npm notice package size: 18.8 kB npm notice unpacked size: 41.7 kB npm notice shasum: 74fbf2900e983bc15ad78ef7c62f56c46b331fb3 npm notice integrity: sha512-gmkR+gIETJabT[...]nG2SwO1ly+Pvg== npm notice total files: 11 npm notice + react-native-login-manager@1.0.0 

发布成功后，邮箱会收到通知，如“ Successfully published react-native-login-manager@1.0.0”。也能够登陆npm网站进行查看：https://www.npmjs.com。以下所示：

五、至此，咱们已经成功把module发布到了npmjs.org。固然，咱们也须要将咱们的代码发布到github。

//来取分支
git pull origin master //添加文件
git add . //提交日志
git commit -m 'add all files of project'

//提交分支
git push origin master

 

5、验证

一、建立一个新的RN项目进行测试。以下所示：

//建立RN项目
react-native init TestThirdPart --version 0.44.3

二、安装react-native-login-manager第三方库。以下所示：

//安装库
npm install react-native-login-manager --save

三、将第三方库连接到RN项目中。以下所示：

//连接第三方库
react-native link react-native-login-manager

四、使用xcode打开项目。以下所示：

五、测试结果。以下所示：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View } from 'react-native'; import LoginManager from 'react-native-login-manager'; //使用自定义的react-native-login-manager第三方库的模块方法
LoginManager.auth("13710371234"); //使用LoginManager模块类的监听通知
const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); let subscription = RCTDeviceEventEmitter.addListener('orientationDidChange', (dimensions) => { Object.keys(dimensions).forEach(key => console.log(key, dimensions[key])); }); //subscription.remove();
 export default class TestThirdPart extends Component { render() { return ( <View style={styles.container}>

            </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', } }); AppRegistry.registerComponent('TestThirdPart', () => TestThirdPart);

//日志以下
....... 2020-01-18 17:35:58.759817+0800 TestThirdPart[96482:2177939] RCTBridge required dispatch_sync to load RCTDevSettings. This may lead to deadlocks [17:35:41] -[LoginManager code:] [第34行] -[LoginManager code:]---获取验证---- [17:35:41] -[LoginManager code:] [第35行] account----13710371234

2020-01-18 17:36:15.866355+0800 TestThirdPart[96482:2177905] [] nw_socket_handle_socket_event [C3.1:1] Socket SO_ERROR [61: Connection refused] 2020-01-18 17:36:15.868757+0800 TestThirdPart[96482:2177905] [] nw_socket_handle_socket_event [C3.2:1] Socket SO_ERROR [61: Connection refused] 2020-01-18 17:36:15.870211+0800 TestThirdPart[96482:2177912] [] nw_connection_get_connected_socket [C3] Client called nw_connection_get_connected_socket on unconnected nw_connection 2020-01-18 17:36:15.870855+0800 TestThirdPart[96482:2177912] TCP Conn 0x600000cd8cc0 Failed : error 0:61 [61] 2020-01-18 17:36:15.888 [info][tid:main][RCTRootView.m:295] Running application TestThirdPart ({ initialProps = { }; rootTag = 1; }) 2020-01-18 17:36:15.888347+0800 TestThirdPart[96482:2177597] Running application TestThirdPart ({ initialProps = { }; rootTag = 1; }) 2020-01-18 17:36:15.891 [info][tid:com.facebook.react.JavaScript] 'Dimensions', { width: 375, scale: 2, height: 667 } 2020-01-18 17:36:15.891136+0800 TestThirdPart[96482:2177939] 'Dimensions', { width: 375, scale: 2, height: 667 } 2020-01-18 17:36:15.891 [info][tid:com.facebook.react.JavaScript] 'orientation', 'Portrait' 2020-01-18 17:36:15.891625+0800 TestThirdPart[96482:2177939] 'orientation', 'Portrait' 2020-01-18 17:36:15.892 [info][tid:com.facebook.react.JavaScript] 'Dimensions', { width: 375, scale: 2, height: 667 } 2020-01-18 17:36:15.892121+0800 TestThirdPart[96482:2177939] 'Dimensions', { width: 375, scale: 2, height: 667 } 2020-01-18 17:36:15.892 [info][tid:com.facebook.react.JavaScript] 'orientation', 'Portrait' 2020-01-18 17:36:15.892490+0800 TestThirdPart[96482:2177939] 'orientation', 'Portrait' ........

 

6、完结

至此，一个真正的ReactNative第三方库开发完成。累死我了。。。。

 

原文出处：https://www.cnblogs.com/XYQ-208910/p/12208955.html