React Native 调用Android原生控件 传递数据

• 1.RN->调用 Android原声控件 Toast、Dialog、、、
• 2.RN->ANDROID 数据传递

RN调用Android原生控件：

• 新建ToastModule 类 继承 ReactConTextBaseJavaModule 类

    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);
        }
    
        @Override //返回控件的名称 JS 调用
        public String getName() {
            return "ToastExample";
        }
    
        @Override // 返回控件的参数 JS 调用
        public Map<String, Object> getConstants() {
          final Map<String, Object> constants = new HashMap<>();
          constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
          constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
          return constants;
        }
    
        @ReactMethod //JS 调用的具体方法
        public void show(String message, int duration) {
          Toast.makeText(getReactApplicationContext(), message, duration).show();
        }
  
    }
  

• @ReactMethod->js 参数映射 关系

    Boolean -> Bool
    Integer -> Number
    Double -> Number
    Float -> Number
    String -> String
    Callback -> function
    ReadableMap -> Object
    ReadableArray -> Array
  

• 新建 组件包路径文件 实现 ReactPackage接口

  public class CustomToastPackage implements ReactPackage {
  
       @Override
       public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   
       @Override //创建NativeModules 列表 返回给 JS
       public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
           List<NativeModule> modules = new ArrayList<>();
   
           modules.add(new ToastModule(reactContext));
   
           return modules;
       }
  
   }
  

• 添加BaseApplication 返回包路径管理类

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new CustomToastPackage() //新增加指定的包路径
      );
    }
  

• RN ->js 调用

1.创建一个Js类 导入react-native 包下的NativeModules 类
2.导出 NativeModules.‘your native widget’

import { NativeModules } from 'react-native'

//toast widget
module.exports = NativeModules.ToastExample;    

调用

import React from 'react'
import { View, Button } from 'react-native'
import ToastExample from './NativeModules'
export default class ToastWidget extends React.Component {
    render() {
        return (<View>
            <Button
                title={'show toast'}
                onPress={() => {
                    ToastExample.show('测试土司面包', ToastExample.SHORT)
                }}
            />
        </View>)
    }
}

Android->RN数据传递

• 1.创建方法类@ReactMethod 注解 将要传的方法 塞入 CallBack 中实现参数传递

    @ReactMethod
    public void getUserInfo(Callback callback){
  
        WritableMap map = Arguments.createMap();
        map.putString("islogin",MainApplication.getApplication().isLogin()+"");
        map.putString("nick_name", getApplication().getNickname());
        map.putString("user_name", getApplication().getUsername());
        map.putString("avatar_url", getApplication().getTouxiang());
        map.putString("access_token",getApplication().getAccess_token());
        map.putString("uid",getApplication().getUid()+"");
        map.putString("gender_str", getApplication().getSex());
        callback.invoke(map);
    }
  

• 传递Json

   @ReactMethod
   public void getAllGameList(Callback callback){
       ArrayList<Game> games = MainApplication.getApplication().getGames();
       WritableArray arrays = Arguments.createArray();
       for (Game game:games){
           WritableMap map = Arguments.createMap();
           map.putString("name",game.name);
           map.putString("thumbnail_url",game.thumbnail_url);
           .....
           arrays.pushMap(map);
       }
       callback.invoke(arrays);
   }
  

Android 和ReactNative 之间传递参数