React Native橋接Android模塊-Activity

React Native橋接Android模塊-Activity

1.創建模塊類

public class RNManagerModule extends ReactContextBaseJavaModule {
    private Context mContext;
    public RNManagerModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        return "RNManagerModule";
    }

	//RN調用android Activity
	@ReactMethod
    public void RNActivity(){
        Intent intent = new Intent(mContext,RnActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);    //一定要加上這句
        mContext.startActivity(intent);
    }

}

2.註冊模塊

public class RNPackage implements ReactPackage {
    @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }


    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules=new ArrayList<>();
        //將我們創建的類添加進原生模塊列表中
        modules.add(new RNManagerModule(reactContext));
        return modules;
    }

}

3.Android包的註冊

將RNPackage添加到 MainApplication.java 中的 getPackages() 方法中

4.RnActivity 代碼 佈局

public class RnActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_rn);
    }

    public void onBack(View view) {
        finish();
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
    android:background="#FF1493"
android:orientation="vertical"
android:id="@+id/ll"
>
<Button
    android:text="goBack"
    android:onClick="onBack"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />
</LinearLayout>

js調用原生代碼

import { NativeModules } from 'react-native';

<Button 
   title="跳轉到Android Activity"
   onPress={() => {
     NativeModules.RNManagerModule.RNActivity();
   }}
   />

RN調用Android需要module名和方法名相同，而Android調用RN只需要方法名相同。
（1）RCTDeviceEventEmitter 事件方式
優點：可任意時刻傳遞，Android主導控制。 可以用於多線程
（2）Callback 回調方式
優點：JS調用，Android返回。
缺點：CallBack爲異步操作，返回時機不確定
（3）Promise
優點：JS調用，Android返回。
缺點：每次使用需要JS調用一次
（4）直傳常量數據（原生向RN）
跨域傳值，只能從原生端向RN端傳遞。RN端可通過 NativeModules.[module名].[參數名] 的方式獲取。
注意：RN層調用NativeModule層進行界面跳轉時，需要設置FLAG_ACTIVITY_NEW_TASK標誌

相關鏈接

1. React Native橋接Android模塊-Toast

2. React Native橋接Android模塊-Activity

3. React Native橋接Android模塊-用Promise機制調用安卓原生代碼

4. React Native橋接Android模塊-callback回調方式

5.React Native橋接Android模塊-RNDeviceEventEmitter方式

6. React Native橋接Android模塊-多線程RNDeviceEventEmitter方式

7.React Native橋接Android模塊-RN獲取Activity回調

參考鏈接

Android原生與RN如何交互通信
RN與原生通訊（安卓篇）