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<String, Object> getConstants() {
        final Map<String,Object> 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<NativeModule> createNativeModules( ReactApplicationContext reactContext) {
        List<NativeModule> list = new ArrayList<>();
        list.add(new ToastModule(reactContext));
        return list;
    }


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

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>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();
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值