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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

最近需要预研一下 将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目录下，再进行编译即可。

效果图

具体事例可以参考NativeJumpToRN

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

以上是 Android原生页面A与React页面相互跳转 的全部内容， 来源链接： utcz.com/z/382945.html

回到顶部