使用 expo kit 在 react native 中加载自定义原生组件答案

【问题标题】：Load custom native component in react native using expo kit使用 expo kit 在 react native 中加载自定义原生组件
【发布时间】：2018-06-09 12:28:49
【问题描述】：

我正在尝试加载自定义 Android WebView 以便能够使用 html 文件输入上传文件（默认情况下，Android webview 不会与输入文件一起使用）。 Im using this code，唯一的区别是我使用的是expo kit，所以我的MainApplication.java是不同的（默认继承另一个类）：

public class MainApplication extends MultiDexApplication {

    // Needed for `react-native link`
    public List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CustomWebViewPackage()
    );
  }

  @Override
  public void onCreate() {
      super.onCreate();
      SoLoader.init(this, /* native exopackage */ false);
  }
}

git 代码所做的基本上是覆盖默认的 react native webview 以使其使用 Android 中的 CustomWebView.java，使用 requireNativeComponent 和此代码 (this is on CustomWebView.android.js)：

var RCTWebView = requireNativeComponent('CustomWebView', WebView, {
nativeOnly: {
    messagingEnabled: PropTypes.bool,
},

});

但是当我使用 exp start 运行应用程序并导航到具有 CustomWebView 的屏幕时，我收到此错误：

总结问题是我的自定义原生组件没有被 React Native 读取。有人可以帮帮我吗？

【问题讨论】：

标签： android reactjs react-native react-native-android expo

【解决方案1】：

Expo 默认不支持任何自定义原生模块。这是因为它们只有一个 perbuilt 二进制文件，并且只加载您编写的 JS 包。因此，您使用 Expo 编写的任何代码都只能是纯 Javascript。但是 Expo 文档确实说您可以在分离后添加自定义本机模块。更多信息在这里：

https://docs.expo.io/versions/latest/guides/detach.html#should-i-detach

https://docs.expo.io/versions/latest/introduction/faq.html#what-is-the-difference-between-expo-and-react-native

https://github.com/expo/expo/issues/56

【讨论】：

【解决方案2】：

在使用 expo 时，您不能使用本机代码，您只能使用它们提供给您的内容。弹出将允许您使用本机代码，但您不能再使用 expo，我很确定它是不可逆的。

您可以在此处查看有关使用 expo 的注意事项的更多信息：https://facebook.github.io/react-native/docs/getting-started.html#caveats

【讨论】：

嗨，马特，感谢您的回答，我已经弹出了。我使用 Expo 工具包，文档说它允许原生代码（您可以弹出到 expo 工具包或反应原生）以及 expo 框架。

【解决方案3】：

您可以从React Native 的最佳代码生成器开始，称为Ignite，它很容易使用它有一些BoilerPlates。

从给定的有用样板文件中，您可以使用Ignite Expo BoilerPlate，它将设置所有代码与 expo + 本机模块支持。将ignite-cli 安装为全局包并运行ignite new [AppName] -b ignite-expo 后

所以这对您来说将是一个简单的步骤。它还添加了一些有用的其他模块。

【讨论】：

感谢您的回答。我已经完成了所有代码并可以正常工作，我唯一还需要做的就是这个本机模块，所以我无法从头开始一切（通过使用 ignite）

【解决方案4】：

退出项目后，尝试通过exp start 使用它不会给您想要的结果。虽然仍支持 expo kit，但您现在需要新的本机代码，因此您需要使用 react-native run-android 运行它。当您这样做时，它不仅会像exp start 那样提供 JS，而且还会编译您的本机代码并将其放入您的设备中。

目前，使用 exp start 为 JS 包提供服务，但该包无法找到您的本机模块，因为它在通用 expo 客户端中不存在。

【讨论】：

【解决方案5】：

正如前面的答案所说，expo 和 native 模块并不能齐头并进。由于 expo 只提供了编辑 javascript 代码的功能，而不是原生模块，原生模块可以被认为是 expo 中的黑盒。

但是，如果您尝试将原生模块集成到 expo 中，或者尝试同时运行 expo 和 react-native 原生模块。这是一个非常有趣的阅读https://codersera.com/blog/running-expo-react-native-together/

【讨论】：