[React Native]原生模块（上）

2016-05-19 本文已影响1492人 zhuhf

正如上篇文章[React Native]移植原生Android项目中提到，ReactNative目前更多的是用于在原生App中加入一个新的模块。那么，此时如果这个ReactNative模块需要使用到一些原生模块的功能，比如访问平台的API；或者你要复用现成的Java代码；又或者使用Java已经成熟的第三方Library，那么这篇文章会一步步告诉你，如何去调用一个已经封装好的Android原生代码。

实际上，正如上篇文章[React Native]移植原生Android项目中提到，目前更多的还是使用React来做V的工作，那么诸如网络请求之类还是通过在ReactNative模块中调用原生已经封装好的库来实现（据说饿了么目前就是这个方案~）

为了更好的理解，本文演示如何在ReactNative中使用Android平台的Toast功能。

步骤一：新建ReactNative项目

使用下面的命令新建一个ReactNative项目，确保你的环境已经配置正确，有问题可以参考[React Native]入门篇
react-native init Demo2
让我们运行下新建的项目，效果如下

Paste_Image.png
步骤二：新建原生模块

用AS开发工具打开Demo2目录下的android项目，新建一个classToastModule继承ReactContextBaseJavaModule，我们的目标是在JS中这样写ToastAndroid.show("Test Toast"，ToastAndroid.SHORT)，来显示一个Toast。
public class ToastModule extends ReactContextBaseJavaModule {
public ToastModule(ReactApplicationContext reactContext) {
super(reactContext);
}
}
ReactContextBaseJavaModule要求实现getName方法，该方法返回一个String，表示模块的名称，这里返回ToastAndroid。
@Override
public String getName() {
return "ToastAndroid";
}
一个可选的方法getConstants，用来封装常量给JS模块使用，比如我们将要用到的常量ToastAndroid.SHORT。
```
@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);
  return constants;
}
```

Java中的方法需要导出才能给JS使用，要导出Java方法，需要使用@ReactMethod来注解，且方法的返回值只能是void。
@ReactMethod
public void show(String message, int duration) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
这样，我们的原生模块已经创建完毕，下面需要注册原生模块了。

步骤三：注册原生模块

新建一个classMyReactPackager，实现ReactPackager接口，我们需要实现createNativeModules方法，该方法返回所有需要被加载的原生模块。
public class MyReactPackager implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> viewManagers = new ArrayList<>();
viewManagers.add(new ToastModule(reactContext));
return viewManagers;
}
```
  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList(); // 返回null会报错
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList(); // 返回null会报错
  }
}
```

我们新建的MyReactPackager，需要在MainActivity的getPackages中注册并返回。

  /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyReactPackager() // 这是我们自定义的ReactPackager
    );
  }

到此原生模块的工作已经告一段落，下面让我们看下如下在ReactNative中调用我们的原生模块。

步骤四：使用原生模块
打开index.android.js文件，在render方法中用TouchableOpacity封装一个可以点击的视图Text，文本内容为Click to show native Toast。

render() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={this.onPressButton}>
        <Text style={styles.instructions}>
        Click to show native Toast
        </Text>
      </TouchableOpacity>
    </View>
  );
}

在JS文件中，引入我们步骤二中新建的原生模块ToastAndroid

  var ToastAndroid = require('ToastAndroid');

TouchableOpacity点击方法为onPressButton，它会调用原生模块导出的show方法。

  onPressButton() {
    ToastAndroid.show('Android Toast', ToastAndroid.SHORT);
  }

让我们运行下项目，最终效果图如下：

device-2016-05-19-221758_0-24.gif

本文的源码地址：Demo2

下一篇文章会介绍JS调用原生模块的高级用法，敬请期待~

[React Native]原生模块（上）

猜你喜欢

热点阅读