使用expo工具包在native native中加载自定义本机组件

Question

我试图加载自定义Android WebView，以便能够使用html文件输入上传文件（默认情况下，Android webview不能使用输入文件）。 我使用这个代码 ，唯一的区别是我使用expo工具包，所以我的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代码所做的是覆盖默认的反应本机webview以使其在Android中使用CustomWebView.java，使用requireNativeComponent和此代码（ 这在CustomWebView.android.js上 ）：

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

}）;

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

总结问题是React Native没有读取我的自定义本机组件。 有人能帮助我吗？

Answer 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

Answer 2

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

你可以在这里看到更多关于使用expo的警告： https ： //facebook.github.io/react-native/docs/getting-started.html#caveats

Answer 3

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

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

所以这对你来说是一个轻松的步骤。 此外，它还添加了一些有用的其他模块。

Answer 4

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

现在，使用exp start服务于JS包，但是所述包无法找到您的本机模块，因为它在通用expo客户端中不存在。

Answer 5

如前面的答案所述，世博会和原生模块并不是齐头并进的。 由于expo仅提供编辑javascript代码而不是本机模块的功能，因此本机模块可以在展示中被视为黑盒子。

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