react-native调用Android原生组件

#react-native和原生交互(Android)

1：在Android项目src包下面创建提供给react(以下简称rc)调用的类

    package com.view;
    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;
    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);
    }

    //返回String名字是rs调用的名称"ToastForJs"（自己定义不能是ToastAndroid,rs内部定义过）
    @Override
    public String getName() {
        return "ToastForJs";
    }

     //getConstants是提供给rs里面js调用的key常量
    @Override
    public Map getConstants() {
        final Map map = new HashMap<>();
        map.put(DURATION_SHORT_KEY, Toast.LENGTH_LONG);
        map.put(DURATION_LONG_KEY, Toast.LENGTH_SHORT);
        return map;
    }

    //定义方法提供给React调用必须注解成@ReactMethod
    @ReactMethod
    public void Show(String message,int duration){
        Toast.makeText(getReactApplicationContext(),message,duration).show();
    }
    }

2:注册
在Android项目src包下面创建提供给react(以下简称rc)调用的类的注册类,类名自定义
    package com.pkg;

    import com.facebook.react.ReactPackage;
    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.uimanager.ViewManager;
    import com.view.ToastModule;
    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.List;

    public class ToastPackage implements ReactPackage {

    //添加注册模块到list，ToastModule是实现类类名称
    @Override
    public List createNativeModules( ReactApplicationContext reactContext) {
        List list = new ArrayList<>();
        list.add(new ToastModule(reactContext));
        return list;
    }

    @Override
    public List createViewManagers( ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
    }
在MainApplication返回注册的package：new ToastPackage()为需要注册的package

    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
            new RNGestureHandlerPackage(),
              new ToastPackage()
      );
    }

3：react调用
#最好封装一层js文件，供其他用到的地方直接引用
使用方法：
react里面新增js文件，例如：NativeJs.js,里面只有如下内容，其中ToastForJs是Android原生getName()返回的字符串

    import {NativeModules } from 'react-native'
    export default NativeModules.ToastForJs;

   #引用

头部引用封装js：import NativeAnd from './../CSS/NativeAnd'

使用： NativeAnd.Show("wangkuio123",NativeAnd.SHORT);

其中Show方法就是原生定义的方法，NativeAnd.SHORT是getConstants中map中key值：

    //定义方法提供给React调用
    @ReactMethod
    public void Show(String message,int duration){
        Toast.makeText(getReactApplicationContext(),message,duration).show();
    }

更多相关文章

随机推荐