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";//js调用本类使用的名字    }    @ReactMethod//被js调用的方法    public void show(String message, int duration) {        Log.i(TAG, "show ToastM");        android.widget.Toast.makeText(getReactApplicationContext(), message, duration).show();    }    @Override    public Map getConstants() {//设置JS可以使用的常量        Map 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 createNativeModules(ReactApplicationContext reactContext) {        List modules = new ArrayList<>();        modules.add(new ToastM(reactContext));        modules.add(new RecevierModule(reactContext));        return modules;    }    @Override    public List> createJSModules() {        return Collections.emptyList();    }    @Override    public List createViewManagers(ReactApplicationContext reactContext) {        return  Collections.emptyList();    }}

3:注册

在mainactivity里面注册包

代码如下：

    protected List getPackages() {        return Arrays.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.jsclass wyq extends Component {  render() {    return (                        Welcome to React Native!                          To get started, edit index.android.js                          Shake or press menu button for dev menu                  );  }    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);

运行成功

结束。

更多相关文章

随机推荐