react-native-custom-module

很久没写博客了, 回国之后的第一篇, 后期还是会继续分享rn的知识

1.在react native安卓中自定义模块 这个类定义在java src的目录下

import com.facebook.react.bridge.Callback;

import android.widget.Toast;
import com.facebook.react.bridge.NativeModule;
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 java.util.Map;
import java.util.HashMap;

public class ToastModule extends ReactContextBaseJavaModule {
    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "ToastExample";
    }
  
    // 这里定义的常量在rn中都可以拿到
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        constants.put("WTF", "WWWWWW");
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }

    // callback是rn传递的回调函数
    @ReactMethod
    public void add(int a, int b, Callback errorCallback, Callback successCallback) {
        int total = a  + b;
        successCallback.invoke(total);
    }
}

注意等下在react native中使用的方法需要加上@ReactMethod 注解。

2.在src下定义package

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 CustomToastPackage 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 ToastModule(reactContext));
    return modules;
  }
}

3.然后修改 MainApplication.java

// MainApplication.java
import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new CustomToastPackage()); // <-- Add this line with your package name.
}

4.接下来就是展示如何在react native中使用模块了

import { NativeModules } from 'react-native';
componentDidMount() {
    setTimeout(() => {
       console.log(NativeModules.ToastExample.WTF); // 可以去看看这个前面java类是怎么定义的
       NativeModules.ToastExample.show('Awesome', NativeModules.ToastExample.SHORT);
       // 调用native module提供的方法 传递一个回调
       NativeModules.ToastExample.add(10, 15,  (msg) => {
        console.log(msg);
      },  (total) => {
        console.log(total);
      },)
    }, 2000)
}

5.可以在模块里面使用promise

import com.facebook.react.bridge.Promise;

public class UIManagerModule extends ReactContextBaseJavaModule {
  private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";
  @ReactMethod
  public void measureLayout(
      int tag,
      int ancestorTag,
      Promise promise) {
    try {
      measureLayout(tag, ancestorTag, mMeasureBuffer);

      WritableMap map = Arguments.createMap();

      map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));
      map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));
      map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));
      map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));

      promise.resolve(map);
    } catch (IllegalViewOperationException e) {
      promise.reject(E_LAYOUT_ERROR, e);
    }
  }

  // js代码
  async function measureLayout() {
  try {
    var {relativeX, relativeY, width, height} = await UIManager.measureLayout(
      100,
      100,
    );

    console.log(relativeX + ':' + relativeY + ':' + width + ':' + height);
  } catch (e) {
    console.error(e);
  }
}

好了, 今天就到这里。。。

赏

谢谢你请我吃糖果