package com.mobilenew.device;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
public class DeviceModule extends ReactContextBaseJavaModule {
//constructor
public DeviceModule(ReactApplicationContext reactContext) {
super(reactContext);
}
//Mandatory function getName that specifies the module name
@Override
public String getName() {
return "Device";
}
//Custom function that we are going to export to JS
@ReactMethod
public void getDeviceName(Callback cb) {
try{
cb.invoke(null, android.os.Build.MODEL);
}catch (Exception e){
cb.invoke(e.toString(), null);
}
}
}
#import "Device.h"
#import <UIKit/UIKit.h>
@implementation Device
//export the name of the native module as 'Device' since no explicit name is mentioned
RCT_EXPORT_MODULE();
//exports a method getDeviceName to javascript
RCT_EXPORT_METHOD(getDeviceName:(RCTResponseSenderBlock)callback){
@try{
NSString *deviceName = [[UIDevice currentDevice] name];
callback(@[[NSNull null], deviceName]);
}
@catch(NSException *exception){
callback(@[exception.reason, [NSNull null]]);
}
}
@end
Why Native Modules
在使用React Native开发手机应用的时候,有时候我们需要使用到platform API,或者写一些多线程的,提高性能的代码,又或者我们需要重新实现一个Native的API,那么React Native提供了这样一个feature来支持我们做这些事情。这次我们以获取设备信息为例来看看如何使用Native Modules实现。
Pre-requisite:
Android
android
的目录,使用Android Studio
打开,建议使用Android Studio
打开,会自动刷新我们需要的依赖。创建一个Java文
DeviceModule.java
,mobileNew/android/app/src/main/java/com/mobilenew/device/DeviceModule.java
,代码如下ReactContextBaseJavaModule
getName()
方法,这个方法的返回值是react导入所需要的module名字@ReactMethod
注解,这样该方法就能正常导出创建了自定义module之后,我们需要注册该module,创建一个Java类
DevicePackage
,/mobileNew/android/app/src/main/java/com/mobilenew/device/DevicePackage.java
,代码如下:DevicePackage
进行初始化,在MainApplication.java
文件里面,添加如下代码:至此,Android的配置已经完成,我们iOS的配置完成之后,再看react native端如何测试验证,RN端的代码是一致的。
iOS
在项目工程里面我们能看到
ios
的目录,使用xcode
打开后缀为.xcodeproj
的文件,看到工程目录可以创建一个group,方便更好地组织代码结构,我这里创建了一个
device
的group在该group下面创建device的声明文件
Device.h
声明文件代码:
类似地,创建实现文件
Device.m
RCT_EXPORT_MODULE()
是一个宏方法,用来定义要导出的module的名字RCT_EXPORT_METHOD
用来表示要导出的方法的名字,从而是的javascript端可以调用iOS要注意的一点是,如果使用了自定义module,在开发环境会有一个warning:
解决的办法是在
AppDelegate.m
文件里面添加如下代码:React Native端调用自定义Module
native 的自定义module实现完成之后,在reactive native的代码里进行测试验证,比如我们点击一个按钮之后,想要弹出设备信息:
效果如下:
Reference: