Android方法调用实体类的值,React Native调用Android原生方法和传值

矫情吗；* 2022-10-17 11:20 113阅读 0赞

![66b52468c121889b900d4956032f1009.png][]

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

创建react native 项目：react-native init callAndroidProject

cd callAndroidProject

react-native run-android

这样就初步创建出了一个React-Natvie项目

完成Android端的操作

第一步： 创建一个ReactModule类 继承 ReactContextBaseJavaModule。

这个类是一个桥梁类，react-native调用Android就在这里进行操作。

复写其中的1个方法：getName()。返回的名称用于在rn代码中调用时使用。

如果要添加调用方法，需要在新增的方法中添加注解@ReactMethod.

具体代码实现：

public class MyCallModule extends ReactContextBaseJavaModule \{

private final ReactApplicationContext mContext;

public MyCallModule(ReactApplicationContext reactContext) \{

super(reactContext);

this.mContext = reactContext;

@Override

public String getName() \{

return "MyCallModule";

@ReactMethod

public void showToast(String str,Callback callback)\{

Toast.makeText(mContext, str, Toast.LENGTH\_SHORT).show();

callback.invoke("success");

第二步：创建一个类 用于实现 ReactPackage。

主要用于注册module。当有多个module类的时候，用ReactPackage类，注册多个module。

代码展示：

public class TotalPackage implements ReactPackage \{

@Override

public List createNativeModules(ReactApplicationContext reactContext) \{

List list = new ArrayList<>();

list.add(new MyCallModule(reactContext));//在这添加 交互的module

//list.add(...)

return list;

@Override

public List createViewManagers(ReactApplicationContext reactContext) \{

return Collections.emptyList();

第三步：在Application类中ReactNativeHost\#getPackages添加步骤二中的package。

public class MainApplication extends Application implements ReactApplication \{

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) \{

@Override

public boolean getUseDeveloperSupport() \{

return BuildConfig.DEBUG;

@Override

protected List getPackages() \{

return Arrays.asList(

new MainReactPackage(),

new TotalPackage()新添加需要注册的模块

);

@Override

protected String getJSMainModuleName() \{

return "index";

\};

这样 Android 原生端的代码就初步完成了。

完成React Native端操作

需要注意的地方有：添加的有Android端的交互，所以导包的时候需要import \{NativeModules\}。

NativeModules.MyCallModule.showToast中MyCallModule为Android端MyCallModule\#getName()返回值。

AppRegistry.registerComponent('callAndroidProject', () => HelloWorldApp);中引号括起来的’callAndroidProject’必须和你init创建的项目名一致。

代码如下所示：

import React, \{ Component \} from 'react';

import \{ AppRegistry, Text,NativeModules\} from 'react-native';//添加的有NativeModules交互，使用就需要导入NativeModules到项目中。

class HelloWorldApp extends Component \{

\_toast()\{

NativeModules.MyCallModule.showToast('toastlph111',(success)=>\{alert(success)\})

render() \{

return (

Hello 22222222221! );

// 注意，这里用引号括起来的'asproject'必须和你init创建的项目名一致

AppRegistry.registerComponent('callAndroidProject', () => HelloWorldApp);

这样就初步完成了React Native 与 Android端的交互流程。

Android页面内嵌套rn布局

方法一：通过container\#addView()添加进去

具体代码：

@Override

protected void onCreate(Bundle savedInstanceState) \{

super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);

mReactInstanceManager = ReactInstanceManager.builder()

.setApplication(getApplication())

.setBundleAssetName("index.android.bundle")

.setJSMainModuleName("index.android")

.addPackage(new MainReactPackage())

.setUseDeveloperSupport(BuildConfig.DEBUG)

.setInitialLifecycleState(LifecycleState.RESUMED)

//.setUseOldBridge(true) // uncomment this line if your app crashes

.build();

mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

setContentView(R.layout.myreactactivity);

initView();

private void initView() \{

ll = (LinearLayout) findViewById(R.id.ll);

ll.addView(mReactRootView);

方法二：通过xml布局中添加ReactRootView，进行展示：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical"

xmlns:tools="http://schemas.android.com/tools"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

tools:context=".OriginalContainRNActivity">

android:text="我是原生"

android:textColor="\#ffffff"

android:textSize="24dp"

android:gravity="center"

android:background="\#000000"

android:layout\_width="match\_parent"

android:layout\_height="50dp" />

android:id="@+id/reactRootView"

android:layout\_width="match\_parent"

android:layout\_height="wrap\_content">

android:text="我是原生"

android:textColor="\#ffffff"

android:textSize="24dp"

android:gravity="center"

android:background="\#000000"

android:layout\_width="match\_parent"

android:layout\_height="50dp" />

public class OriginalContainRNActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler \{

public static final int OVERLAY\_PERMISSION\_REQ\_CODE = 1235;

private ReactRootView mReactRootView;

private ReactInstanceManager mReactInstanceManager;

@Override

protected void onCreate(Bundle savedInstanceState) \{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity\_original\_contain\_rn);

// if (Build.VERSION.SDK\_INT >= Build.VERSION\_CODES.M) \{

// if (!Settings.canDrawOverlays(this)) \{

// Intent intent = new Intent(Settings.ACTION\_MANAGE\_OVERLAY\_PERMISSION,

// Uri.parse("package:" + getPackageName()));

// startActivityForResult(intent, OVERLAY\_PERMISSION\_REQ\_CODE);

// \}

mReactRootView = findViewById(R.id.reactRootView);

mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication())

.setBundleAssetName("index.android.bundle")

// .setJSMainModuleName("index.android")

.addPackage(new MainReactPackage())

.setUseDeveloperSupport(BuildConfig.DEBUG)

.setInitialLifecycleState(LifecycleState.RESUMED)

.build();

mReactRootView.startReactApplication(mReactInstanceManager, "asproject", null);

@Override

public void invokeDefaultOnBackPressed() \{

super.onBackPressed();

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) \{

// super.onActivityResult(requestCode, resultCode, data);

if (requestCode == OVERLAY\_PERMISSION\_REQ\_CODE) \{

if (Build.VERSION.SDK\_INT >= Build.VERSION\_CODES.M) \{

if (!Settings.canDrawOverlays(this)) \{

// SYSTEM\_ALERT\_WINDOW permission not granted...

@Override

protected void onPause() \{

super.onPause();

if (mReactInstanceManager != null) \{

mReactInstanceManager.onHostPause(this);

@Override

protected void onResume() \{

super.onResume();

if (mReactInstanceManager != null) \{

mReactInstanceManager.onHostResume(this, this);

@Override

protected void onDestroy() \{

super.onDestroy();

if (mReactInstanceManager != null) \{

mReactInstanceManager.onHostDestroy(this);

@Override

public void onBackPressed() \{

if (mReactInstanceManager != null) \{

mReactInstanceManager.onBackPressed();

\} else \{

super.onBackPressed();

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) \{

if (keyCode == KeyEvent.KEYCODE\_MENU && mReactInstanceManager != null) \{

mReactInstanceManager.showDevOptionsDialog();

return true;

return super.onKeyDown(keyCode, event);

rn与Android数据交互的三种方式：Callback

Promise

RN端DeviceEventEmitter注册监听，App端发送消息。类似于广播。

Callback

RN端调用方法，Android端执行对应方法，并通过Promise进行回调。

Android端代码演示：

@ReactMethod

public void testAndroidCallbackMethod(String msg, Callback callback)\{

Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH\_LONG).show();

callback.invoke("abc");

RN端代码演示：

\_onPressButton2()\{

NativeModules.CallModule.testAndroidCallbackMethod("HelloJack",(result)=>\{

this.setState(\{text:result\});

\});

Promise

RN端调用方法，Android端执行对应方法，并通过Promise进行回调。

Android端代码演示：

@ReactMethod

public void textAndroidPromiseMethod(String msg, Promise promise)\{

Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH\_SHORT).show();

String result="lph23333";

promise.resolve(result);

RN端代码演示：

\_onPressButton3()\{

NativeModules.CallModule.textAndroidPromiseMethod("abcx").then((result)=>\{

this.setState(\{text3:result\});

\}).catch((error)=>\{

this.setState(\{text:'error'\});

\})

DeviceEventEmitter

执行流程：RN端注册监听

Android 发送时间

RN端执行监听中的回调事件

RN端代码：

//componentWillMount为生命周期方法， 组件将要装载时候执行，在render之前调用。

componentWillMount() \{

DeviceEventEmitter.addListener('EventName', function (msg) \{

console.log(msg);

let rest=NativeModules.CallModule.MESSAGE;

ToastAndroid.show("DeviceEventEmitter收到消息:" + "n" + rest, ToastAndroid.SHORT)

\});

Android端：

public void onScanningResult()\{

WritableMap params = Arguments.createMap();

params.putString("key", "myData");

getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("EventName", params);

[66b52468c121889b900d4956032f1009.png]: /images/20221014/b4ab2081abb349ea87194a7d37e6d4f9.png

Android方法调用实体类的值,React Native调用Android原生方法和传值

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【Flutter】原生Android调用Flutter的dart方法

相关 Scala 传值调用和传名调用

相关通过js调用android原生方法

相关原生Android调用Flutter的dart方法

相关 Flutter调用原生Android的Java方法

相关 Android方法调用实体类的值,React Native调用Android原生方法和传值

相关 android 调用服务,android-从服务类调用活动类方法

相关 Android WebView 调用JS方法获取返回值

相关【Uniapp】Uniapp 的 JavaScript 中调用 Android 原生方法

相关 vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全