Android方法调用实体类的值,React Native调用Android原生方法和传值
8種機(jī)械鍵盤軸體對(duì)比
本人程序員，要買一個(gè)寫代碼的鍵盤，請(qǐng)問紅軸和茶軸怎么選？
創(chuàng)建react native 項(xiàng)目：react-native init callAndroidProject
cd callAndroidProject
react-native run-android
這樣就初步創(chuàng)建出了一個(gè)React-Natvie項(xiàng)目
完成Android端的操作
第一步： 創(chuàng)建一個(gè)ReactModule類 繼承 ReactContextBaseJavaModule。
這個(gè)類是一個(gè)橋梁類，react-native調(diào)用Android就在這里進(jìn)行操作。
復(fù)寫其中的1個(gè)方法：getName()。返回的名稱用于在rn代碼中調(diào)用時(shí)使用。
如果要添加調(diào)用方法，需要在新增的方法中添加注解@ReactMethod.
具體代碼實(shí)現(xiàn)：
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");
}
}
第二步：創(chuàng)建一個(gè)類 用于實(shí)現(xiàn) ReactPackage。
主要用于注冊(cè)module。當(dāng)有多個(gè)module類的時(shí)候，用ReactPackage類，注冊(cè)多個(gè)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()新添加需要注冊(cè)的模塊
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
}
這樣 Android 原生端的代碼就初步完成了。
完成React Native端操作
需要注意的地方有：添加的有Android端的交互，所以導(dǎo)包的時(shí)候需要import {NativeModules}。
NativeModules.MyCallModule.showToast中MyCallModule為Android端MyCallModule#getName()返回值。
AppRegistry.registerComponent('callAndroidProject', () => HelloWorldApp);中引號(hào)括起來的’callAndroidProject’必須和你init創(chuàng)建的項(xiàng)目名一致。
代碼如下所示：
import React, { Component } from 'react';
import { AppRegistry, Text,NativeModules} from 'react-native';//添加的有NativeModules交互，使用就需要導(dǎo)入NativeModules到項(xiàng)目中。
class HelloWorldApp extends Component {
_toast(){
NativeModules.MyCallModule.showToast('toastlph111',(success)=>{alert(success)})
}
render() {
return (
Hello 22222222221! );
}
}
// 注意，這里用引號(hào)括起來的'asproject'必須和你init創(chuàng)建的項(xiàng)目名一致
AppRegistry.registerComponent('callAndroidProject', () => HelloWorldApp);
這樣就初步完成了React Native 與 Android端的交互流程。
Android頁面內(nèi)嵌套rn布局
方法一：通過container#addView()添加進(jìn)去
具體代碼：
@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，進(jìn)行展示：
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數(shù)據(jù)交互的三種方式：Callback
Promise
RN端DeviceEventEmitter注冊(cè)監(jiān)聽，App端發(fā)送消息。類似于廣播。
Callback
RN端調(diào)用方法，Android端執(zhí)行對(duì)應(yīng)方法，并通過Promise進(jìn)行回調(diào)。
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端調(diào)用方法，Android端執(zhí)行對(duì)應(yīng)方法，并通過Promise進(jìn)行回調(diào)。
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
執(zhí)行流程：RN端注冊(cè)監(jiān)聽
Android 發(fā)送時(shí)間
RN端執(zhí)行監(jiān)聽中的回調(diào)事件
RN端代碼：
//componentWillMount為生命周期方法， 組件將要裝載時(shí)候執(zhí)行，在render之前調(diào)用。
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);
}
總結(jié)
以上是生活随笔為你收集整理的Android方法调用实体类的值,React Native调用Android原生方法和传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言科技感图片,科技感与运动范十足，几
- 下一篇： android sharedpre,An