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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34983989/article/details/83754551

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

一,Activity跳转到React 页面

  1. 创建一个react native 项目,这个很简单
  2. 用android studio在对应的android 中创建一个类LaunchActivity,作为我们项目的启动页,别忘了在Manifest.xml中进行配置
<activity android:name=".LaunchActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
  1. 在LaunchActivity中随便添加一个click事件,让点击跳转到我们的MainActivity页面
button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(LaunchActivity.this, MainActivity.class);
                startActivity(intent);
            }
        });
  1. 在我们的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<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new OpenNativeModule(reactContext));
        return modules;
    }

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

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

注意

  • @ReactMethod 这个不能忘,要不然调用不会起作用的
  • OpenNativePackage 需要到MainApplication中进行注册
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new OpenNativePackage()
      );
    }
  1. 在我们的JS 中写对应的调用方法就可以了
      <Button
          title={'跳转到原生页面'}
          onPress={() => {
            this.jumpToNativeView();
          }}
          />
jumpToNativeView() {
    nativeModule.openNativeVC();
  }

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

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

效果图
在这里插入图片描述
具体事例可以参考NativeJumpToRN

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

展开阅读全文

没有更多推荐了,返回首页