无法将 React-Native 添加到现有应用程序答案

【问题标题】：Cannot Add React-Native to existing app无法将 React-Native 添加到现有应用程序
【发布时间】：2017-04-29 05:30:55
【问题描述】：

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

但在设备上添加反应和安装应用程序后，我收到以下错误：

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 时，我的设备上安装了应用程序，但在启动使用 react 组件的活动时崩溃。

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

我做错了什么？

【问题讨论】：

您可以尝试从另一边开始...制作一个 React Native 应用程序，然后将您现有的项目合并到其中
我从来没有将 react-native 添加到现有应用程序中，总是从头开始 - 但是您是否在开发设置中输入了您的 IP 地址？ “BatchedBridge”错误可能与此有关

标签： android react-native

【解决方案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)

干杯:)

【讨论】：