Android原生页面Activity与React页面相互跳转

最近需要预研一下 将React 代码打个aar包供给android 项目使用，由于牵扯到页面跳转，所以首先得实现Android原生页面即Activity 跳转到React的 js页面。 这里简单的记一下

一，Activity跳转到React 页面

1. 创建一个react native 项目，这个很简单
2. 用android studio在对应的android 中创建一个类LaunchActivity，作为我们项目的启动页，别忘了在Manifest.xml中进行配置

3. 在LaunchActivity中随便添加一个click事件，让点击跳转到我们的MainActivity页面

button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(LaunchActivity.this, MainActivity.class);
                startActivity(intent);
            }
        });

4. 在我们的MainActivity中

public class MainActivity extends ReactActivity {
    public MainActivity() {
    }

    protected String getMainComponentName() {
        return "NativeJumpToRN";   //  和我们的 package.json 中的name 项目名称保持一致
    }
}

现在 运行程序 react-native run-android 就可从原生页面跳转到React页面了
如果是APK 安装运行，那么就要到main 目录下创建一个assets文件夹，然后将react代码打包成bundle文件拷贝到此文件夹中，要不然会报找不到资源的错误。

二，React跳转到Activity页面

React 页面跳转到Activity页面主要还是React 和原生进行通信，然后原生进行Intent跳转

1. 创建对应的Module和Package

public class OpenNativeModule extends ReactContextBaseJavaModule {
    private ReactContext mReactContext;

    public OpenNativeModule(ReactApplicationContext context) {
        super(context);
        this.mReactContext = context;
    }

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

    @ReactMethod
    public void openNativeVC() {
        Intent intent = new Intent();
        intent.setClass(mReactContext, TestActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mReactContext.startActivity(intent);
    }
}

public class OpenNativePackage implements ReactPackage {
    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new OpenNativeModule(reactContext));
        return modules;
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

其中 openNativeVC 方法就是具体的跳转方法，我们可以看到里面用了Intent进行跳转

注意

• @ReactMethod 这个不能忘，要不然调用不会起作用的
• OpenNativePackage 需要到MainApplication中进行注册

@Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
              new OpenNativePackage()
      );
    }

2. 在我们的JS 中写对应的调用方法就可以了

       {
            this.jumpToNativeView();
          }}
          />

jumpToNativeView() {
    nativeModule.openNativeVC();
  }

这样就可以从React页面跳转到原生Activity页面了

关于前面说到的打aar包，先要将整个js 文件打包成bundle文件，拷贝到modle的assets目录下，再进行编译即可。

效果图

具体事例可以参考NativeJumpToRN

如有疑问，请提出共同讨论学习。