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

sag*_*its 13 android reactjs react-native react-native-android expo

我试图加载自定义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);
  }
}
Run Code Online (Sandbox Code Playgroud)

基本上git代码所做的是覆盖默认的反应本机webview以使其使用Android中的CustomWebView.java,使用requireNativeComponent和此代码(这在CustomWebView.android.js上):

var RCTWebView = requireNativeComponent('CustomWebView', WebView, {
nativeOnly: {
    messagingEnabled: PropTypes.bool,
},
Run Code Online (Sandbox Code Playgroud)

});

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

在此输入图像描述

总结问题是React Native没有读取我的自定义本机组件.有谁可以帮助我吗?

Atu*_*tul 8

默认情况下,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


Mat*_*Aft 7

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

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


Waq*_*med 5

你可以从最好的代码生成器开始,React Native已知为Ignite它很容易使用它有一些BoilerPlates.

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

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