android - 从 React-Native 代码调用 Android Activity

Question

我正在使用 REACT-NATIVE 构建 Android 应用程序。我想从 React-Native 代码调用 android Activity 。 (比如当我在我的 native 代码中单击按钮时，它应该调用 android Activity )

我有4个类文件

• MainActivity.java(在android studio中打开时由react-native创建)
• MainApplication.java(由 react-native 创建)
• Login.java(安卓 Activity 文件)
• Example.java(安卓 Activity 文件)

想要实现如下流程:

Login.java -> React-Native js -> Example.java

我已经浏览了以下链接，但无法理解

https://stackoverflow.com/a/32825290/4849554

这里问过类似的问题

React Native Android: Showing an Activity from Java

Answer 1

要启动 Android Activity ，您需要创建自定义 native 模块。假设一个叫做 ActivityStarter；它可以在 JavaScript 中使用，如下所示:

import { ..., NativeModules, ... } from 'react-native';

export default class DemoComponent extends Component {
    render() {
        return (
        <View>
            <Button
                onPress={() => NativeModules.ActivityStarter.navigateToExample()}
                title='Start example activity'
            />
        </View>
        );
    }
}

ActivityStarter 只是一个 Java 类，它实现了名为 NativeModule 的 React Native Java 接口(interface)。此接口(interface)的繁重工作已经由 BaseJavaModule 完成，因此通常扩展那个接口(interface)或 ReactContextBaseJavaModule:

class ActivityStarterModule extends ReactContextBaseJavaModule {

    ActivityStarterModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    void navigateToExample() {
        ReactApplicationContext context = getReactApplicationContext();
        Intent intent = new Intent(context, ExampleActivity.class);
        context.startActivity(intent);
    }
}

这个类的名字无关紧要；暴露给 JavaScript 的 ActivityStarter 模块名称来自 getName() 方法。

react-native init 生成的默认应用程序包含一个初始化 React Native 的 MainApplication 类。除其他外，它扩展了 ReactNativeHost 以覆盖其 getPackages 方法:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage()
    );
}

如果您要将 React Native 添加到现有应用程序，this page您是否按如下方式覆盖了 Activity 的 onCreate:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModuleName("index.android")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

    setContentView(mReactRootView);
}

注意 addPackage(new MainReactPackage())。无论您使用哪种方法，您都需要添加一个自定义包来公开我们的自定义模块。它可能看起来像这样:

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

    // UPDATE: This method was deprecated in 0.47
    // @Override
    // public List<Class<? extends JavaScriptModule>> createJSModules() {
    //     return Collections.emptyList();
    // }

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

最后，更新 MainApplication 以包含我们的新包:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new ActivityStarterReactPackage(), // This is it!
            new MainReactPackage()
    );
}

或者您可以对 ReactInstanceManager.builder() 执行 addPackage(new ActivityStartecReactPackage())。

你可以找到一个complete, self-contained example here .

---

更新

createJSModules 已从 0.47 版本的 ReactPackage 接口(interface)中删除，并已从示例中注释掉。如果您出于某种原因无法使用旧版本的 RN，您仍然需要它。

---

2019 年 3 月更新

The sample project现在支持 iOS 的类似功能。