react-native调用Android原生组件

    xiaoxiao2022-07-05  146

    #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();     }

    最新回复(0)