ReactNative-JS 调用原生方法实例代码(转载)

发布时间：2023-09-06 01:51责任编辑：董明明关键词：React

第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule

package com.mixture;

import android.content.Context;

import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

public class MyNativeModule extends ReactContextBaseJavaModule {

public static final String REACTCLASSNAME = "MyNativeModule";

private Context mContext;

public MyNativeModule(ReactApplicationContext reactContext) {

super(reactContext);

mContext = reactContext;

}

@Override

public String getName() {

return REACTCLASSNAME;

}

/**

* 必须添加反射注解不然会报错

* 这个方法就是ReactNative将要调用的方法，会通过此类名字调用

* @param msg

*/

@ReactMethod

public void callNativeMethod(String msg) {

Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();

}

第二步创建一个React包管理器实现ReactPackage将每个模块放到模块集合中

package com.mixture;

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.Collections;

import java.util.List;

/**

* Created by Administrator on 2016/9/22.

*/

public class MyReactPackage implements ReactPackage {

@Override

public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

List<NativeModule> modules = new ArrayList<>();

modules.add(new MyNativeModule(reactContext));

return modules;

}

@Override

public List<Class<? extends JavaScriptModule>> createJSModules() {

return Collections.emptyList();

}

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

第三步在应用入口注册这个React包管理器

package com.mixture;

import android.app.Application;

import android.util.Log;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactInstanceManager;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;

import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

protected boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

//在应用中注册这个包管理器

new MyReactPackage()

);

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

第四步就是在ReactNative中调用react-native中提供一个NativeModules通过模块名字和方法名字进行调用

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, {Component} from ‘react‘;

import {

AppRegistry,

StyleSheet,

Text,

View,

NativeModules,

} from ‘react-native‘;

class Mixture extends Component {

render() {

return (

<View style={styles.container}>

<Text style={styles.instructions} onPress={() => this.onClick()}>

调用用原生方法

</Text>

</View>

);

}

/**

* 调用原生方法

*/

onClick() {

NativeModules.MyNativeModule.callNativeMethod(‘成功调用原生方法‘);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center‘,

alignItems: ‘center‘,

backgroundColor: ‘#F5FCFF‘,

},

instructions: {

textAlign: ‘center‘,

color: ‘#333333‘,

marginBottom: 5,

},

});

AppRegistry.registerComponent(‘Mixture‘, () => Mixture);

ReactNative-JS 调用原生方法实例代码(转载)

原文地址：https://www.cnblogs.com/candyzhmm/p/8975015.html

ReactNative-JS 调用原生方法实例代码(转载)

知识推荐