模块

内置模块

Clipboard

剪切板

import { Clipboard } from "react-native";

// 复制文本到剪贴板
Clipboard.setString("Hello, World!");

// 从剪贴板获取文本
Clipboard.getString().then((text) => {
  console.log("剪贴板内容:", text);
});

Vibration

震动功能

import { Vibration } from "react-native";

// 让设备振动 1000 毫秒
Vibration.vibrate(1000);

Platform

平台判断

import { Platform } from "react-native";

function isIOS() {
  return Platform.OS === "ios";
}

// 可以判断使用组件
const Component = Platform.select({
  ios: () => require("ComponentIOS"),
  android: () => require("ComponentAndroid"),
})();
<Component />;

// 添加平台后缀，在加载时，会按照平台去加载
BigButton.ios.js;
BigButton.android.js;

自定义模块

模块为 MavlinkBridge，分为如下步骤

创建 Module

MavlinkBridge.java

package com.sagc3_mobile.modules.mavlink;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.bridge.Callback;


public class MavlinkBridge extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;

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

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


    // 以事件的形式，主动通知 rn
    private void sendEvent(ReactContext reactContext, String eventName, WritableMap params) {
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
    }

    @ReactMethod
    public void addListener(String eventName) {
        // Set up any upstream listeners or background tasks as necessary
    }

    @ReactMethod
    public void removeListeners(Integer count) {
        // Remove upstream listeners, stop unnecessary background tasks
    }


    // 在 rn 调用的时候，可以传递参数（也可以是对象），回调函数
    @ReactMethod
    public void connect(ReadableMap data, Callback callback){
      callback();
    }


    // 在rn调用时，可以传递复杂对象，且可以返回 promise
    @ReactMethod
    public void connect(int localPort, int remotePort, String remoteIP, Promise promise) {
        WritableMap payload = Arguments.createMap();

        payload.putInt("code", 0);
        payload.putString("msg", "succeed");

        promise.resolve(payload);
    }
}

创建 Package

MavlinkBridgePackage.java

package com.sagc3_mobile.modules.mavlink;

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 MavlinkBridgePackage 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 MavlinkBridge(reactContext));

    return modules;
  }
}

挂载 Package

MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();

  packages.add(new MavlinkBridgePackage());

  return packages;
}

React Native 调用

import { NativeModules } from "react-native";

NativeModules.MavlinkBridge.connect(); // 直接调用

// 事件进行数据交互, 当java发送事件时，此事件可以收到
const MavlinkBridgeEventEmitter = new NativeEventEmitter(
  NativeModules.MavlinkBridge
);

// 可以收到 android 传递过来的数据
MavlinkBridgeEventEmitter.on("data", () => {});