React Native在Android當中實踐（四）——代碼集成

代碼集成

Android Studio的環境配置完成以後 接下來咱們開始對代碼進行集成 index.js文件 首先在項目根目錄中建立一個空的index.js文件。(注意在0.49版本以前是index.android.js文件) index.js是React Native應用在Android上的入口文件。並且它是不可或缺的！

添加你本身的React Native代碼

在這裏方便測試 咱們只是簡簡單單寫一個js文件進行測試

import React from 'react';import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
 
AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);
複製代碼

在這裏特別要注意的是：

這個名稱要和package.json當中的

保持一致，不然會出現異常。

配置權限以便開發當中的紅屏錯誤可以正確的顯示。

若是你的應用會運行在Android 6.0（API level 23）或更高版本，請確保你在開發版本中有打開懸浮窗(overlay)權限。你能夠在代碼中使用Settings.canDrawOverlays(this);來檢查。之因此須要這一權限，是由於咱們會把開發中的報錯顯示在懸浮窗中（僅在開發階段須要）。在Android 6.0（API level 23）中用戶須要手動贊成受權。具體請求受權的作法是在onCreate()中添加以下代碼。其中OVERLAY_PERMISSION_REQ_CODE是用於回傳受權結果的字段。

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);
    }
}
Finally, the onActivityResult() method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.
@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent 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...
            }
        }
    }
}
複製代碼

若是不須要開發者，則不須要以上相關配置。

運行React Native

首先須要在一個Activity中建立一個ReactRootView對象，而後在這個對象之中啓動React Native應用，並將它設爲界面的主視圖。 若是你想在安卓5.0如下的系統上運行，請用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @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)
                .build();

        // 注意這裏的MyReactNativeApp必須對應「index.android.js」中的
        // 「AppRegistry.registerComponent()」的第一個參數
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);  

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}
複製代碼

若是你使用的是 Android Studio , 可使用Alt + Enter快捷鍵來自動爲MyReactActivity類補上缺失的import語句。注意BuildConfig應該是在你本身的包中自動生成，無需額外引入。千萬不要從com.facebook...的包中引入！ 咱們須要把 MyReactActivity 的主題設定爲 Theme.AppCompat.Light.NoActionBar ，由於裏面有許多組件都使用了這一主題。

<activity
   android:name=".MyReactActivity"
   android:label="@string/app_name"
   android:theme="@style/Theme.AppCompat.Light.NoActionBar">
 </activity>
複製代碼

一個ReactInstanceManager能夠在多個activities或fragments間共享。 You will want to make your own ReactFragment or ReactActivity and have a singleton holder that holds a ReactInstanceManager. When you need the ReactInstanceManager (e.g., to hook up the ReactInstanceManager to the lifecycle of those Activities or Fragments) use the one provided by the singleton. 下一步咱們須要把一些activity的生命週期回調傳遞給ReactInstanceManager：

@Overrideprotected void onPause() {
    super.onPause();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause(this);
    }
}
@Overrideprotected void onResume() {
    super.onResume();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostResume(this, this);
    }
}
@Overrideprotected void onDestroy() {
    super.onDestroy();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostDestroy();
    }
}
複製代碼

咱們還須要把後退按鈕事件傳遞給React Native：

@Override
 public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}
@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    return super.onKeyUp(keyCode, event);
}
複製代碼

如今activity已就緒，能夠運行一些JavaScript代碼了。 在新版本的React Native的集成沒必要這麼麻煩 只須要簡單的繼承 ReactActivity 而後實現如下幾個方法

@Override
protected String getMainComponentName() {
    return null;
}

@Override
protected boolean getUseDeveloperSupport() {
    return false;
}

@Override
protected List<ReactPackage> getPackages() {
    return null;
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}
複製代碼

其中

protected String getMainComponentName() {
    return null;
}  
複製代碼

方法須要返回的名稱即爲 注意這裏的MyReactNativeApp必須對應「index.android.js」中的 「AppRegistry.registerComponent()」的第一個參數 名稱。 如圖：

最後咱們也須要自定義一個Application 不然運行時會報錯

public class MyApplication extends Application implements ReactApplication {
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    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()
            );
        }


    };
}
複製代碼

在AndroidManifest.xml當中增長

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
複製代碼

這個是調試的Activity，若須要咱們要集成到咱們項目中的。 到此爲止，ReactNative 集成到已有項目中完成！！！火燒眉毛的運行試試吧！！ 運行ReactNative 首先，在Terminal當中運行 npm start命令（若集成了yarn 則直接運行yarn start便可） 若出現

則表示成功。爲了確認 咱們能夠在瀏覽器當中輸入以下地址 http://localhost:8081/index.android.js 瀏覽器顯示咱們的js文件，則表示咱們已經集成成功，以下圖。

而後運行項目

之因此有這個權限，是由於在React Native測試環境下會若是有異常會有彈層因此咱們容許許可便可。而後React Native正式的狀況則不會有這個權限。設置地方在Application當中的

這個地方進行配置

想學習更多Android知識，或者獲取相關資料請加入Android開發交流羣：1018342383。 有面試資源系統整理分享，Java語言進階和Kotlin語言與Android相關技術內核，APP開發框架知識， 360°Android App全方位性能優化。Android前沿技術，高級UI、Gradle、RxJava、小程序、Hybrid、 移動架構師專題項目實戰環節、React Native、等技術教程！架構師課程、NDK模塊開發、 Flutter等全方面的 Android高級實踐技術講解。還有在線答疑