React Native填坑之旅--与Android模块通信

前端之家收集整理的这篇文章主要介绍了React Native填坑之旅--与Android模块通信前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用Toast作为例子。实现的功能是可以在JavaScript里写ToastAndroid.show('Awesome',ToastAndroid.SHORT)显示一个Toast通知

代码https://github.com/future-challenger/react-native-gaode-map

创建一个原生模块

创建一个类,继承ReactContextBaseJavaModule

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);
  }
}

之后需要实现一个方法getName

@Override
  public String getName() {
    return "AnotherToastAndroid"; // 不能返回ToastAndroid,这个会报错,或者需要手动指定覆盖RN已有的实现。
  }

这个方法必须实现。它的返回值是React Native的js部分调用模块时的名称。另外,如果这个方法返回的字符串包含RCT的话,那么RCT会被去掉。也就是,如果getName返回的是RCTToastAndroid的话,在js调用的时候还是使用ToastAndroid

接下来实现show方法

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

注意:模块要导出方法给js使用,那么这个方法上必须使用@ReactMethod注解!并且返回值必须为void。如果要返回值的话,需要使用回调方法或者注册事件。这些下文会讲到。

方法的参数类型

在导出给js的方法添加参数的时候,只能使用部分类型(java -> javascript):

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

注册模块

注册模块之后就可以使用。如果你的App里没有Package类,那就自己创建一个。比如本例,就可以创建名为ToastReactPackage的Package类,该类实现ReactPackage接口。

public class ToastReactPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return null;
  }

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return null;
  }

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

类中每个方法名称已经明确的表明了其本身的作用。我们这里导出的是一个模块,所以需要实现createNativeModules方法。其他的方法只要返回一个空列表就可以。最后的ToastReactPackage类的实现是:

public class ToastReactPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new ToastModule(reactContext));

    return modules;
  }

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

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

最后在MainApplicationgetPackages方法注册Package。

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new MainReactPackage(),new ToastReactPackage() // 这一句用来注册我们的AnotherToastAndroid模块
      );
    }
  };

在React Native中使用模块。

import {
  //...
  NativeModules,PixelRatio,} from 'react-native';

let AnotherToastAndroid = NativeModules.AnotherToastAndroid;

export default class mobike extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={() => {
          AnotherToastAndroid.show('Another Toast',AnotherToastAndroid.LONG);
        }}>
          <Text style={{ textAlign: 'center',}}>
            Show Toast
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

不直接相关的内容就隐藏掉了。使用的时候只要在import中引入NativeModules,之后在let AnotherToastAndroid = NativeModules.AnotherToastAndroid;提取我们的原生模块。这个模块的名字就是在Android模块getName方法里返回的名称AnotherToastAndroid

之后在TouchableOpacity的onPress事件中调用AnotherToastAndroidshow方法

至此,我们之前说的功能就都实现了。

返回常量

前面的内容要运行起来还差这个一环。返回常量,你看到js代码里有这样的调用

AnotherToastAndroid.show('Another Toast',AnotherToastAndroid.LONG);

有这么一句:AnotherToastAndroid.LONG。要使用LONG,还有没有用到的SHORT常量,需要原生模块返回这样的常量。

@Nullable
  @Override
  public Map<String,Object> getConstants() {
// return super.getConstants();
    final Map<String,Object> constants = new HashMap<>();
    constants.put(DURATION_SHORT_KEY,Toast.LENGTH_SHORT);
    constants.put(DURATION_LONG_KEY,Toast.LENGTH_LONG);
    return constants;
  }

方法getConstants是类ReactContextBaseJavaModule的一个可选方法,专门用来返回常量。返回的内容就是字典Map<String,Object>

现在Demo可以运行起来了。

回调方法

前文说道,要返回值给js就需要用回调方法。现在看看在原生里如何实现这一点:

@ReactMethod
  public void currentThreadName(Callback errorCallback,Callback successCallback) {
    try {
      String tn = Thread.currentThread().getName();
      successCallback.invoke(tn);
    } catch(Exception e) {
      errorCallback.invoke(e.getMessage());
    }
  }

在Toast模块里加了一个获取当前线程的方法。Android的这个导出回调方法看起来还是有点奇怪。本来应该是一个回调返回两个参数:一个error,一个结果。这里用了两个Callback,可能也是条件限制吧。

看看js如何使用:

<Button
    style={{ marginTop: 10,}}
    title='use callback'
    pressHandler={
      () => {
        AnotherToastAndroid.currentThreadName((msg) => console.log(`error message ${msg}`),(threadName) => {
            Alert.alert('Thread Name',`thread nane: ${threadName}`,null);
          });
      }}
  />

Promise

回调缺点很明显。所以多数的时候都会选择使用Promise。再加上现在流行的async-await就更多的人使用Promise了。

@ReactMethod
  public void currentThreadNameByPromise(Promise promise) {
    try {
      String tn = Thread.currentThread().getName();
      promise.resolve(tn);
    } catch (Exception e) {
      promise.reject("Thread Error",e);
    }
  }

来看看如何使用Promise的:

<Button
    style={{ marginTop: 10,}}
    title='use Promise'
    pressHandler={
      () => {
        AnotherToastAndroid.currentThreadNameByPromise().then((threadName) =>
          Alert.alert('Thread Name',null)
        ).catch(err => Alert.alert('Thread Name',`get thread nane error: ${err.message}`,null));
      }}
  />

这些知识在一般的使用中就足够了,如果需要更复杂的内容可以查看官方文档。我也会在之后补齐这部分的内容

原文链接:https://www.f2er.com/react/304542.html

猜你在找的React相关文章