本人是做後端php的，對各類語言和方向都有興趣，多而不精。最近公司專案有一個移動端app，決定採用react-native開發，專案中有這麼個要求，要求react-native中嵌入原生頁面，然後原生頁面嵌入unity，並實現原生和unity之前相互通訊，網路查詢資料後實現這些功能，查詢過程中，遇到很多問題，並且參照了很多網友的部落格，在此做一個記錄，以防後患。

開發環境及工具：

macbook pro, webstorm,android studio,unity

本篇文章是第一篇，實現react-native加入android原生。 

 1.建立react-native專案：react-native init rauDemo

 進入目錄：cd rauDemo

 用webstorm開啟專案進行編輯專案，用android studio開啟內部android專案，本步的目的是指定本機的android sdk的路徑，否則會報如下錯誤：

        *What went wrong:

        Aproblem occurred configuring project ':app'.

 > SDK location not found.Define location with sdk.dir in the local.properties file or with anANDROID_HOME environment variable.

測試執行：usb連線手機，react-native run-android

成功執行，如下圖：

2.android studio開啟的android目錄如下：

新增程式碼，將java方法封裝成react可呼叫的方法，按照官方方式:

在src/main/java/com.raudemo下新增程式碼，

（1）新增RedirectModule.java，程式碼如下：

public class RedirectModule extends ReactContextBaseJavaModule {

    public RedirectModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    /**
     * 從JS頁面跳轉到原生activity 同時也可以從JS傳遞相關資料到原生
     * @param name 需要開啟的Activity的class
     * @param params
     */
    @ReactMethod
    public void startActivityFromJS(String name, String params){
        try{
            Activity currentActivity = getCurrentActivity();
            if(null!=currentActivity){
                Class toActivity = Class.forName(name);
                Intent intent = new Intent(currentActivity,toActivity);
                intent.putExtra("params", params);
                currentActivity.startActivity(intent);
            }
        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException(
                    "不能開啟Activity : "+e.getMessage()+e.toString());
        }
    }

}
 

（2）新增MyReactPackage.java，程式碼如下：

public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(
                new RedirectModule(reactContext)
        );
    }

    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();

    }
}

（3）MainApplication.java新增程式碼：new MyReactPackage()，最後如下：

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new MyReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

最後專案結構如圖：

3.android studio新建頁面，命名UnityActuivity，為之後嵌入Unity程式準備。

修改頁面佈局,程式碼包裡有，需要將UnityActivity設定成橫屏，在AndroidManifest.xml裡面UnityActivity新增android:screenOrientation="landscape"，原因是Unity匯出的程式會有螢幕橫屏等設定，需要相對應。過後說這個問題

4.修改react-native程式碼：

在App.js內匯入TouchableOpacity和NativeModules元件，NativeModules即為react-native提供的入口，android原生寫的RedirectModule可以通過這個元件讀到。

Return的頁面裡面新增如下程式碼：

<TouchableOpacity onPress={()=>{
    NativeModules.RedirectModule.startActivityFromJS('com.raudemo.UnityActivity','eeeee')
}}>
  <Text>
    跳轉原生android
  </Text>
</TouchableOpacity>

目的是實現點選跳轉原生頁面。

截圖如下：

點選跳轉後如下：

至此，react-native跳轉原生頁面完成。

完整程式碼：稍後奉上