react-native之module的使用

实现自定义Toast模块->ToastM（ToastModule在组件中已经存在了不能重名 因此起名ToastM）

1：新建一个react-native项目，将Android部分导入到Androidstudio中

2：新建一个类 ToastM 继承ReacContextBaseJavaModule

     代码如下：

package com.wyq;

import android.util.Log;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.Nullable;

/**
 * Created by wyq on 2016/1/21.
 */
public class ToastM extends ReactContextBaseJavaModule {

    private static final String TAG = "ToastM";
    private static final String SHORT = "SHORT";
    private static final String LONG = "LONG";

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

    @Override
    public String getName() {
        return "ToastM";<span style="color:#3366ff;">//js调用本类使用的名字</span>
    }

    @ReactMethod<span style="color:#3366ff;">//被js调用的方法</span>
    public void show(String message, int duration) {
        Log.i(TAG, "show ToastM");
        android.widget.Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
    @Override
    public Map<String, Object> getConstants() {//设置JS可以使用的常量
        Map<String, Object> Constants = new HashMap<>();
        Constants.put(SHORT, Toast.LENGTH_SHORT);
        Constants.put(LONG, Toast.LENGTH_LONG);
        return Constants;
    }
}

2：定义一个包继承reactpackage

    代码如下：

package com.wyq;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
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.Arrays;
import java.util.Collections;
import java.util.List;

/**
 * Created by wyq on 2016/1/21.
 */
public class AnExampleReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastM(reactContext));
        modules.add(new RecevierModule(reactContext));
        return modules;
    }

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

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

3:注册

在mainactivity里面注册包

代码如下：

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),new AnExampleReactPackage());
    }

Java代码的部分就完成了

下面看一下js代码部分

1：项目的目录下建立一个文件名为toast.js的文件

    如图：

 

代码如下：

'use strict';
var { NativeModules } = require('react-native');
var ToastM = NativeModules.ToastM;
var Toast = {
     SHORT:ToastM.SHORT,
     LONG:ToastM.LONG,
     show:function(
     msg: string,
     duration: number):
     void{
      ToastM.show(msg,duration);
      },
};
module.exports = Toast;

2：在index.android.js中代码如下：

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  NativeModules,
} from 'react-native';

//原生模块
var Toast = require('./toast');//通过路径引入toast.js

class wyq extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
    componentDidMount(){
    Toast.show('componentDidMount', Toast.LONG);//使用模块
    }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('wyq', () => wyq);

运行成功

结束。