电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: RN 集成到Android步骤（2） [打印本页]

作者: look_w 时间: 2019-3-4 20:39 标题: RN 集成到Android步骤（2）

3、添加RN界面

1、在项目根目录下新建index.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('AndroidRnDemoApp', () => HelloWorld);


2、新建一个Activity作为RN界面的容器，命名为RNActivity

package com.example.com.androidrndemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;


import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class RNActivity extends AppCompatActivity 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")
                  .setJSMainModulePath("index")
                  .addPackage(new MainReactPackage())
                  .setUseDeveloperSupport(BuildConfig.DEBUG)
                  .setInitialLifecycleState(LifecycleState.RESUMED)
                  .build();
         //这里的AndroidRnDemoApp必须对应“index.js”中的“AppRegistry.registerComponent()”的第一个参数
         mReactRootView.startReactApplication(mReactInstanceManager, "AndroidRnDemoApp", null);
         //加载ReactRootView到布局中
         setContentView(mReactRootView);
      }
      @Override
      public void invokeDefaultOnBackPressed() {
         super.onBackPressed();
      }
      /**
      * ReactInstanceManager生命周期同activity
      */
      @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 onKeyUp(int keyCode, KeyEvent event) {
         if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
         }
         return super.onKeyUp(keyCode, event);
      }
}




3、在MainActivity中添加Intent跳转到RNActivity逻辑（button的点击触发）

package com.example.com.androidrndemo;

import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatButton;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         Button button=(Button) findViewById(R.id.button);
         button.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                  Intent intent = new Intent(MainActivity.this,RNActivity.class); //沟通两个activity的桥梁
                  startActivity(intent);
            }
         });
      }
}

// layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context="com.example.com.androidrndemo.MainActivity">

      <Button android:id='@+id/button'
         android:layout_height="wrap_content"
         android:layout_width="match_parent"
         android:text="go RN Page"></Button>

</android.support.constraint.ConstraintLayout>

4、在Android-Manifest.xml中注册activity

<activity
   android:name=".RNActivity"
   android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)