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高级实践技术讲解。还有在线答疑