无法将React-Native添加到现有应用

Question

我在向现有应用程序添加本机支持时遇到问题。 我想通过react-native支持增强我的android应用。 为了显示我的问题，我已经从Android Studio向导创建了“ Hello World” Android应用程序，现在我想向它添加react-native。 我正在关注反应教程

• https://facebook.github.io/react-native/docs/getting-started.html
• https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

但是在添加响应并在设备上安装应用程序后，出现以下错误：

04-28 21:47:50.394 12537-12588/? E/AndroidRuntime: FATAL EXCEPTION: mqt_js
                                               Process: pl.fzymek.reactairquality, PID: 12537
                                               java.lang.RuntimeException: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly
                                                   at com.facebook.react.bridge.DefaultNativeModuleCallExceptionHandler.handleException(DefaultNativeModuleCallExceptionHandler.java:24)
                                                   at com.facebook.react.devsupport.DevSupportManagerImpl.handleException(DevSupportManagerImpl.java:246)
                                                   at com.facebook.react.cxxbridge.CatalystInstanceImpl.onNativeException(CatalystInstanceImpl.java:465)
                                                   at com.facebook.react.cxxbridge.CatalystInstanceImpl.access$400(CatalystInstanceImpl.java:51)
                                                   at com.facebook.react.cxxbridge.CatalystInstanceImpl$NativeExceptionHandler.handleException(CatalystInstanceImpl.java:481)
                                                   at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:33)
                                                   at android.os.Looper.loop(Looper.java:154)
                                                   at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
                                                   at java.lang.Thread.run(Thread.java:761)
                                                Caused by: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly
                                                   at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
                                                   at android.os.Handler.handleCallback(Handler.java:751)
                                                   at android.os.Handler.dispatchMessage(Handler.java:95)
                                                   at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
                                                   at android.os.Looper.loop(Looper.java:154) 
                                                   at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196) 
                                                   at java.lang.Thread.run(Thread.java:761) 
                                                Caused by: com.facebook.jni.CppException: Could not get BatchedBridge, make sure your bundle is packaged correctly
                                                   at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) 
                                                   at android.os.Handler.handleCallback(Handler.java:751) 
                                                   at android.os.Handler.dispatchMessage(Handler.java:95) 
                                                   at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) 
                                                   at android.os.Looper.loop(Looper.java:154) 
                                                   at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196) 
                                                   at java.lang.Thread.run(Thread.java:761) 

我的目录结构如下：

├── ReactAirQuality
│   ├── ReactAirQuality.iml
│   ├── app
│   ├── build
│   ├── build.gradle
│   ├── buildsystem
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── index.android.js
│   ├── local.properties
│   ├── node_modules
│   ├── package.json
│   └── settings.gradle

根目录（ReactAirQuality）是从Android Studio向导生成的android应用，在此目录中，我正在运行npm install或react-native start命令。

现在，当我运行./gradlew clean installDebug时，我的设备上./gradlew clean installDebug应用程序，但是启动使用react组件的活动时崩溃。

应用程序托管在github上： https : //github.com/fzymek/ReactAirQuality/tree/feature/react-native-support 。

我究竟做错了什么？

Answer 1

似乎有问题的是，您将所有文件都保存在同一目录中，这不是本机反应的方式。...所以，您可以做的是：

1）创建一个新的react native项目并复制您已经准备好的所有js文件。

2）根据您的要求准备package.json，并将index.android.js和index.ios.js与现有的js文件链接。

3）现在运行npm install 。 如果ios文件夹中有一个pod文件，请运行pod install 。

4）最后但不是最少运行rnpm link来链接本机模块。

上面的代码向您展示了如何将现有项目与新项目合并。

代码中的错误可能是由于您没有更改设置以在设备中运行应用程序而出现的。

1）打开开发者菜单(command + m)

2）选择开发设置，然后在其中输入您的IP地址（@@@ .. @@@。@。@@：8081）

干杯:)