Android原生跳转至React-Native的实现方案

写作时间：2020/4/27晚
React-Native版本：0.62
开发平台：windows
目标平台：android

本案例在初始化的RN项目上进行修改，将初始界面改为原生界面，如下图所示

上图提供了一个按钮，点击即可进入RN界面，如下图所示

该项目的具体实现过程和源码如下：

1 初始化RN工程：react-native init Init
这里我的项目名称为Init

2 修改App.js，用如下内容替换

// App.js
import React from 'react';
import {View, Text} from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>React-Native界面</Text>
      </View>
    );
  }
}

3 打开Android Studio，将MainActivity中的内容删除，换成如下代码

// MainActivity.java
package com.init;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

  public void sendMessage(View view) {
    Intent intent = new Intent( MainActivity.this,RNActivity.class);
    startActivity(intent);
  }
}

4 在同样的路径下，添加RNActivity.java文件，添加如下代码

// RNActivity.java
package com.init;

import com.facebook.react.ReactActivity;

public class RNActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "Init";
    }
}

5 在res文件夹中添加layout文件夹，文件夹中添加新的文件activity_main.xml，如下图所示

该文件内部代码实现如下，当然你也可以直接通过拖拽控件的方式对界面进行调整

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="120dp"
        android:layout_height="30dp"
        android:layout_margin="50dp"
        android:text="原生界面" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="sendMessage"
        android:text="跳转到RN" />
</LinearLayout>

6 为按钮添加需要执行的方法sendMessage，这个方法在MainActivity中已经声明，如下图所示

7 最后一步，打开AndroidManifest.xml文件，添加新的Activity，如下图所示

以上内容完成之后，执行react-native run-android即可