reactnative 橋接原生文件配置之獲取設(shè)備號組件

本文原創(chuàng)首發(fā)于公眾號:ReactNative開發(fā)圈,轉(zhuǎn)載需注明出處。(有一些功能不一定能用,反正我用時undefined)

這次介紹的獲取移動設(shè)備信息的組件名叫:react-native-device-info,兼容IOS和安卓雙平臺,可以獲取設(shè)備ID、設(shè)備品牌、設(shè)備型號、IP以及APP版本號等信息。是一個應用很廣泛的基礎(chǔ)組件。

安裝依賴

npm install --save react-native-device-info

注:如果React Naitve的版本大于0.47,那么需要使用>=0.11版本的react-native-device-info組件

自動連接原生項目

react-native link react-native-device-info

示例

參考官方文檔:https://github.com/rebeccahughes/react-native-device-info#getdeviceid
有一個方法比較特殊就是isPinOrFingerprintSet方法,需要使用回調(diào)調(diào)用。代碼如下:

import DeviceInfo from 'react-native-device-info';

DeviceInfo.isPinOrFingerprintSet()(isPinOrFingerprintSet => {
  if (!isPinOrFingerprintSet) {
    ...
  }
}

直接集成有些方法會返回undefined

為了解決上述功能不行,那么怎么辦呢?

很簡單架設(shè)RN與原生的橋架來解決,以獲取設(shè)備信息為例

react-native的文檔的原生模塊中可以看到清晰的代碼 傳送門

iOS橋接文件:

在ios文件夾中,添加一個nativeBridge文件夾(為了整理好文件,無實際作用),在該文件夾下添加橋接文件RNDeviceBridgeManager的.h和.m文件(這個文件名隨便起,最好符合命名規(guī)范),前期工作就準備完畢了,現(xiàn)在開始文件配置,如下:

RNDeviceBridgeManager.h

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h> // 不能去掉,否則會報莫名錯誤

@interface RNDeviceBridgeManager : NSObject <RCTBridgeModule>

@end

RNDeviceBridgeManager.m

#import "RNDeviceBridgeManager.h"
#import "sys/utsname.h"
#import <CoreTelephony/CTCarrier.h> // 獲取運營商信息
#import <CoreTelephony/CTTelephonyNetworkInfo.h>

@implementation RNDeviceBridgeManager

RCT_EXPORT_MODULE(AppDeviceInfo)
// 解決警告 - Module RNDeviceBridgeManager requires main queue setup since it overrides `constantsToExport` but doesn't implement `requiresMainQueueSetup`.
- (NSDictionary *)constantsToExport{
  NSDictionary *info = [[NSBundle mainBundle] infoDictionary];
  NSString *appName = [info objectForKey:@"CFBundleDisplayName"];
  NSString *appVersion = [info objectForKey:@"CFBundleShortVersionString"];
  CGRect rect = [[UIScreen mainScreen] bounds];
  CGSize size = rect.size;
  CGFloat width = size.width;
  CGFloat height = size.height;
  NSArray *screenSize =@[@(width), @(height)];
  CGFloat scale_screen = [UIScreen mainScreen].scale;
  NSArray *screenScale = @[@(width*scale_screen), @(height*scale_screen)];
  CTTelephonyNetworkInfo *info_tel = [[CTTelephonyNetworkInfo alloc] init];
  CTCarrier *carrier = info_tel.subscriberCellularProvider;
  NSDictionary *deviceInfo = @{
                               @"sysVersion": [[UIDevice currentDevice] systemVersion], // 手機系統(tǒng)版本
                               @"deviceId": [[[UIDevice currentDevice] identifierForVendor] UUIDString], // 設(shè)備唯一標識符
                               @"platformType": [[UIDevice currentDevice] systemName], // 設(shè)備名稱
                               @"phoneName": [[UIDevice currentDevice] name], // 手機別名: 用戶定義的名稱
                               @"phoneType": [self deviceVersion], // 手機型號
                               @"localPhoneModel": [[UIDevice currentDevice] localizedModel], // 地方型號  (國際化區(qū)域名稱)
                               @"size_screen": screenSize, // 物理尺寸
                               @"scale_screen": screenScale, // 分辨率
                               @"carrierName": carrier != nil ? carrier.carrierName : nil, // 運營商 -- 模擬器無運營商要特別處理,不然會閃退,nil時返回值里不包含本條信息
                               @"appVersion": appVersion, // 當前應用軟件版本  比如:1.0.1
                               @"appBuild": [info objectForKey:@"CFBundleVersion"], // 當前應用版本Build值   int類型
                               @"appName": appName, // app名稱
                               };
  return deviceInfo;
}

- (NSString *)deviceVersion{
  // 需要#import "sys/utsname.h"
  struct utsname systemInfo;
  uname(&systemInfo);
  NSString * deviceString = [NSString stringWithCString:systemInfo.machine encoding:NSUTF8StringEncoding];
  //iPhone
  if ([deviceString isEqualToString:@"iPhone3,1"])    return @"iPhone 4";
  if ([deviceString isEqualToString:@"iPhone3,2"])    return @"iPhone 4";
  if ([deviceString isEqualToString:@"iPhone3,3"])    return @"iPhone 4";
  if ([deviceString isEqualToString:@"iPhone4,1"])    return @"iPhone 4S";
  if ([deviceString isEqualToString:@"iPhone5,1"])    return @"iPhone 5";
  if ([deviceString isEqualToString:@"iPhone5,2"])    return @"iPhone 5 (GSM+CDMA)";
  if ([deviceString isEqualToString:@"iPhone5,3"])    return @"iPhone 5c (GSM)";
  if ([deviceString isEqualToString:@"iPhone5,4"])    return @"iPhone 5c (GSM+CDMA)";
  if ([deviceString isEqualToString:@"iPhone6,1"])    return @"iPhone 5s (GSM)";
  if ([deviceString isEqualToString:@"iPhone6,2"])    return @"iPhone 5s (GSM+CDMA)";
  if ([deviceString isEqualToString:@"iPhone7,1"])    return @"iPhone 6 Plus";
  if ([deviceString isEqualToString:@"iPhone7,2"])    return @"iPhone 6";
  if ([deviceString isEqualToString:@"iPhone8,1"])    return @"iPhone 6s";
  if ([deviceString isEqualToString:@"iPhone8,2"])    return @"iPhone 6s Plus";
  if ([deviceString isEqualToString:@"iPhone8,4"])    return @"iPhone SE";
  // 日行兩款手機型號均為日本獨占,可能使用索尼FeliCa支付方案而不是蘋果支付
  if ([deviceString isEqualToString:@"iPhone9,1"])    return @"國行、日版、港行iPhone 7";
  if ([deviceString isEqualToString:@"iPhone9,2"])    return @"港行、國行iPhone 7 Plus";
  if ([deviceString isEqualToString:@"iPhone9,3"])    return @"美版、臺版iPhone 7";
  if ([deviceString isEqualToString:@"iPhone9,4"])    return @"美版、臺版iPhone 7 Plus";
  if ([deviceString isEqualToString:@"iPhone10,1"])   return @"iPhone_8";
  if ([deviceString isEqualToString:@"iPhone10,4"])   return @"iPhone_8";
  if ([deviceString isEqualToString:@"iPhone10,2"])   return @"iPhone_8_Plus";
  if ([deviceString isEqualToString:@"iPhone10,5"])   return @"iPhone_8_Plus";
  if ([deviceString isEqualToString:@"iPhone10,3"])   return @"iPhone_X";
  if ([deviceString isEqualToString:@"iPhone10,6"])   return @"iPhone_X";
  if ([deviceString isEqualToString:@"iPod1,1"])      return @"iPod Touch 1G";
  if ([deviceString isEqualToString:@"iPod2,1"])      return @"iPod Touch 2G";
  if ([deviceString isEqualToString:@"iPod3,1"])      return @"iPod Touch 3G";
  if ([deviceString isEqualToString:@"iPod4,1"])      return @"iPod Touch 4G";
  if ([deviceString isEqualToString:@"iPod5,1"])      return @"iPod Touch (5 Gen)";
  if ([deviceString isEqualToString:@"iPad1,1"])      return @"iPad";
  if ([deviceString isEqualToString:@"iPad1,2"])      return @"iPad 3G";
  if ([deviceString isEqualToString:@"iPad2,1"])      return @"iPad 2 (WiFi)";
  if ([deviceString isEqualToString:@"iPad2,2"])      return @"iPad 2";
  if ([deviceString isEqualToString:@"iPad2,3"])      return @"iPad 2 (CDMA)";
  if ([deviceString isEqualToString:@"iPad2,4"])      return @"iPad 2";
  if ([deviceString isEqualToString:@"iPad2,5"])      return @"iPad Mini (WiFi)";
  if ([deviceString isEqualToString:@"iPad2,6"])      return @"iPad Mini";
  if ([deviceString isEqualToString:@"iPad2,7"])      return @"iPad Mini (GSM+CDMA)";
  if ([deviceString isEqualToString:@"iPad3,1"])      return @"iPad 3 (WiFi)";
  if ([deviceString isEqualToString:@"iPad3,2"])      return @"iPad 3 (GSM+CDMA)";
  if ([deviceString isEqualToString:@"iPad3,3"])      return @"iPad 3";
  if ([deviceString isEqualToString:@"iPad3,4"])      return @"iPad 4 (WiFi)";
  if ([deviceString isEqualToString:@"iPad3,5"])      return @"iPad 4";
  if ([deviceString isEqualToString:@"iPad3,6"])      return @"iPad 4 (GSM+CDMA)";
  if ([deviceString isEqualToString:@"iPad4,1"])      return @"iPad Air (WiFi)";
  if ([deviceString isEqualToString:@"iPad4,2"])      return @"iPad Air (Cellular)";
  if ([deviceString isEqualToString:@"iPad4,4"])      return @"iPad Mini 2 (WiFi)";
  if ([deviceString isEqualToString:@"iPad4,5"])      return @"iPad Mini 2 (Cellular)";
  if ([deviceString isEqualToString:@"iPad4,6"])      return @"iPad Mini 2";
  if ([deviceString isEqualToString:@"iPad4,7"])      return @"iPad Mini 3";
  if ([deviceString isEqualToString:@"iPad4,8"])      return @"iPad Mini 3";
  if ([deviceString isEqualToString:@"iPad4,9"])      return @"iPad Mini 3";
  if ([deviceString isEqualToString:@"iPad5,1"])      return @"iPad Mini 4 (WiFi)";
  if ([deviceString isEqualToString:@"iPad5,2"])      return @"iPad Mini 4 (LTE)";
  if ([deviceString isEqualToString:@"iPad5,3"])      return @"iPad Air 2";
  if ([deviceString isEqualToString:@"iPad5,4"])      return @"iPad Air 2";
  if ([deviceString isEqualToString:@"iPad6,3"])      return @"iPad Pro 9.7";
  if ([deviceString isEqualToString:@"iPad6,4"])      return @"iPad Pro 9.7";
  if ([deviceString isEqualToString:@"iPad6,7"])      return @"iPad Pro 12.9";
  if ([deviceString isEqualToString:@"iPad6,8"])      return @"iPad Pro 12.9";
  
  if ([deviceString isEqualToString:@"AppleTV2,1"])      return @"Apple TV 2";
  if ([deviceString isEqualToString:@"AppleTV3,1"])      return @"Apple TV 3";
  if ([deviceString isEqualToString:@"AppleTV3,2"])      return @"Apple TV 3";
  if ([deviceString isEqualToString:@"AppleTV5,3"])      return @"Apple TV 4";
  
  if ([deviceString isEqualToString:@"i386"])         return @"Simulator";
  if ([deviceString isEqualToString:@"x86_64"])       return @"Simulator";
  
  return deviceString;
}
@end

文件配置說明:

.h文件中#import <React/RCTBridgeModule.h>配置橋接文件必須導入這個RN橋接模塊依賴,并遵循“RCTBridgeModule”協(xié)議;在.m文件中實現(xiàn)“RCTBridgeModule”協(xié)議。
以示例中導出設(shè)備信息的方法為例,RCT_EXPORT_MODULE(AppDeviceInfo)為“RCTBridgeModule”協(xié)議提供方法,即在RN中用AppDeviceInfo標識導出方法;

為了實現(xiàn)RCTBridgeModule協(xié)議,你的類需要包含RCT_EXPORT_MODULE()宏。這個宏也可以添加一個參數(shù)用來指定在Javascript中訪問這個模塊的名字。如果你不指定,默認就會使用這個Objective-C類的名字。其他宏的運用本文就不做贅述,要了解移步傳送門

RN中調(diào)用橋接文件模塊

import { NativeModules } from 'react-native'
/**
 * 獲取用戶設(shè)備碼
 */
export function fetchDeviceId() {
  const AppInfo = NativeModules.AppDeviceInfo
  console.log('橋接文件返回的值', AppInfo)
  return AppInfo.deviceId
}

以上iOS部分的橋接工作就算完成了,但是最新的react-native版本(0.56.0),會報黃色Warning,強迫癥患者,解決辦法如下:

// 在程序入口(即路由配偶文件)
import {
  YellowBox,
} from 'react-native'
YellowBox.ignoreWarnings(['Module RNDeviceBridgeManager requires main queue setup since it overrides `constantsToExport` but doesn\'t implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.'])

注意:上述()中的即是黃色警告內(nèi)容了,但是遇到有 ' 的情況就尷尬了,比如doesn't這樣會報錯,需要對 ' 進行轉(zhuǎn)義,在 ' 前加 \ 就好了;

Android橋接文件:

本人對Android不太了解,所以不能提供同ios一樣詳細的解釋,步驟請照抄,如果你了解安卓特性可自由發(fā)揮;
在android文件夾下,路徑app/src/main/java/com/appname 文件夾下(appname為你的項目名)創(chuàng)建一個bridges文件夾,在該文件夾下添加橋接文件RNDeviceBridgeManager.java,同時在app/src/main/java/com/appname 文件夾下創(chuàng)建 “注冊模塊”文件RNReactPackage.java,開始配置文件,如下:

RNDeviceBridgeManager.java

// RNDeviceBridgeManager.java

package com.reactnative.bridges;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
// 導出方法用
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactMethod;

import java.util.Map;
import java.util.HashMap;

public class RNDeviceBridgeManager extends ReactContextBaseJavaModule {

  private static final String REACT_NAME = "AppDeviceInfo";
  // private static final String SYSTEM_VERSION = "sysVersion";
  private static final String DEVICE_ID = "deviceId";
  // private static final String PLATFORM_TYPE = "platformType";
  // private static final String PHONE_TYPE = "phoneType";
  // private static final String CARRIER_NAME = "carrierName";
  // private static final String PACKAGE_NAME = "packageName";
  // private static final String APP_VERSION = "appVersion";
  // private static final String APP_NAME = "appName";
  public RNDeviceBridgeManager(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return REACT_NAME;
  }

  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put(DEVICE_ID, "1234");
    return constants;
  }
}

RNReactPackage.java

// RNReactPackage.java

package com.reactnative;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class RNReactPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new RNDeviceBridgeManager(reactContext));

    return modules;
  }

}

然后可以在RN項目文件中調(diào)用Android橋接文件里的東西,測試上述'AppDeviceInfo'信息是否有打印,如有打印則可根據(jù)具體業(yè)務將上述注釋掉的代碼補齊,測試方式如下:

import {
  View,
  NativeModules,
} from 'react-native
class home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }

  render() {
    console.log(NativeModules.AppDeviceInfo)
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}>
      </View>
    )
  }
}

module.exports = home

綜述,RN項目橋接調(diào)用iOS和Android原生方法的配置方法講述完畢,謝謝觀看;荊軻刺秦王!

另附:

獲取Android設(shè)備唯一標識碼:http://www.itdecent.cn/p/2ceda3690a52
獲取系統(tǒng)版本:

//需導入系統(tǒng)架包 import android.os.Build;
constants.put(SYSTEM_VERSION, Build.VERSION.RELEASE);
// 下面是拼接信息(可以不這樣,看個人)
constants.put(SYSTEM_VERSION, Build.MODEL+" Android "+Build.VERSION.RELEASE+" "+Build.VERSION.SDK_INT);

獲取packageName包名:

// 需導入系統(tǒng)架包 import com.facebook.react.bridge.ReactApplicationContext;
constants.put(PACKAGE_NAME,getReactApplicationContext().getPackageName());

獲取app版本號:

// 需導入系統(tǒng)架包 import android.content.pm.PackageInfo;
// import android.content.pm.PackageManager;
  PackageInfo info = getPackageInfo();
  if(info != null){
    constants.put(APP_VERSION,info.versionName);
  }
  private PackageInfo getPackageInfo(){
    PackageManager manager = getReactApplicationContext().getPackageManager();
    PackageInfo info = null;
    try{
        info = manager.getPackageInfo(getReactApplicationContext().getPackageName(),0);
        return info;
    }catch (Exception e){
        e.printStackTrace();
    }finally {
        return info;
    }
  }

手機型號:

constants.put(PHONE_TYPE,Build.MODEL);

平臺和應用名稱自己寫固定的;
運營商信息,網(wǎng)上查找的資料全部不能用,不是缺少所需架包,就是一些方法未定義,尚未找到方法,所以直接不設(shè)置了;(吐槽一下:抄襲都不驗證的一大堆,百度上全是這種,還排名置頂,害人不淺!)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容