React Native读取系统属性

关注

原创 2022-07-14 18:24:54 1k 阅读 AI 写同款· GEO 优化 ›

react narive获取本地文件并上传到服务器工作中遇到要在APP中上传Excel的需求，找了老半天，试过react-native-fs，但是不好用，要么就是只能上传图片的，后来发现这个第三方库完美的符合需求，他不仅可以上传Excel，基本上现有的文件他都可以吧！具体查看文档！这个库就是：react-native-document-picker 用法举例：先install下来： npm i --save react-native-document-picker 在iOS文件夹下 pod安装 pod install 导入文件 import Docu 阅读详情

一、背景

前段时间，公司需要用React Native做一套电视机顶盒上的视频播放系统，而其中有一项功能是需要读取到机顶盒的卡号，这个卡号提前被生产商写入了系统属性，叫“persist.sys.mmcp.smarcardid”，通过在命令行运行adb shell后，再运行getprop命令可以查出来，如下图：

但React Native本身并不提供直接读取系统属性的功能，这时候就需要手动开发一个原生插件来完成这项功能，具体步骤如下。

二、创建插件

1、创建SystemProperty类

在android\app\src\main\java\com\videoplayer下创建一个java类SystemProperty.java

源码如下：

package com.videoplayer;

import android.widget.Toast;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

import androidx.annotation.NonNull;

public class SystemProperty extends ReactContextBaseJavaModule {

    private static ReactApplicationContext reactContext;

    private static Method sysPropGet;
    private static Method sysPropSet;

    static {
        try {
            Class<?> S = Class.forName("android.os.SystemProperties");
            Method M[] = S.getMethods();
            for (Method m : M) {
                String n = m.getName();
                if (n.equals("get")) {
                    sysPropGet = m;
                } else if (n.equals("set")) {
                    sysPropSet = m;
                }
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public SystemProperty(ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @NonNull
    @Override
    public String getName() {
        return "SystemProperty";
    }

    @ReactMethod
    public void getSystemProperty(String name,Promise promise) {
        try {
            String value=(String) sysPropGet.invoke(null, name,"");
            promise.resolve(value);
        } catch (Exception e) {
            Toast.makeText(getReactApplicationContext(), "获取卡号出错", Toast.LENGTH_LONG).show();
            promise.reject("获取卡号出错", e);
            e.printStackTrace();
        }
    }
}

该类继承了ReactContextBaseJavaModule，这是开发React Native插件必须要继承的类，并在getName方法中返回SystemProperty，当然也可以返回其他名字，这个名字是在前端JavaScript中要用到的。其中getSystemProperty方法的第一个参数为要获取的系统属性名，第二个参数为Promise类型，在JavaScript端可以使用awiat或then的方式获取数据。

Java 方法需要使用注解@ReactMethod。方法的返回类型必须为void。React Native 的跨语言访问是异步进行的，所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件。

2、创建SystemPropertyPackage类

在 Java 这边要做的最后一件事就是注册这个模块。我们需要在应用的 Package 类的createNativeModules方法中添加这个模块。如果模块没有被注册，它也无法在 JavaScript 中被访问到。在android\app\src\main\java\com\videoplayer下创建一个java类SystemPropertyPackage.java。这个 package 需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的 react-native 应用文件夹的 android 目录中。

源码如下：

package com.videoplayer;

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;

import androidx.annotation.NonNull;

public class SystemPropertyPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new SystemProperty(reactContext));

        return modules;
    }

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

3、修改MainApplication类

在MainApplication.java中添加如下行，注册SystemProperty插件

三、使用插件

import {
    NativeModules
} from 'react-native';


let value=await NativeModules.SystemProperty.getSystemProperty("persist.sys.mmcp.smarcardid");

收录于

移动终端

React Native

标签

#大数据

react native AsyncStorage 使用实例异步存储数据以及读取简介常用API 读取数据写入数据删除数据更多API 保存目录 iOS端 Android 使用实例异步存储数据异步读取数据异步删除某条数据异步删除所有数据同步读取数据同步存储数据简介AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。在真正使用的过程中建议在AsyncStorage的基础上做一层抽象封装，而不是直接使用阅读详情