如何调试使用react-native-reanimated与@react-native-firebase的React Native应用？

当前依赖版本：

• "@react-native-firebase/app": "15.5.0"
• "react": "18.1.0"
• "react-native": "0.70.5"
• "react-native-reanimated": "^2.13.0"

一、react-native-reanimated 调试替代方案 #

• Reanimated内置调试模式
  在项目根目录创建.env文件，添加REANIMATED_DEBUG=1，重启Metro后，控制台会输出动画相关日志，还能通过ReanimatedDebugger组件在App内查看动画节点的实时状态。
• Hermes调试器
  直接通过Chrome的chrome://inspect入口连接Hermes调试器，它兼容Turbo Modules，支持JS逻辑断点调试、变量查看，弥补Chrome调试工具失效的问题。

二、解决@react-native-firebase导致Flipper失效的问题 #

• 分环境配置use_frameworks!
  修改Podfile，仅在release打包时启用静态框架，debug模式下保持原配置，让Flipper正常工作：

  if ENV['RELEASE']
    use_frameworks! :linkage => :static
  end
  

  调试时直接执行常规debug命令，release打包前先运行RELEASE=1 pod install。
• Flipper兼容静态框架配置
  如果必须在debug模式下使用use_frameworks!，在Podfile中添加前置配置：

  pre_install do |installer|
    installer.pod_targets.each do |pod|
      if pod.name.start_with?('Flipper') || pod.name.start_with?('FB')
        pod.build_configurations.each do |config|
          config.build_settings['OTHER_LDFLAGS'] ||= ['-ObjC']
        end
      end
    end
  end
  

  执行pod install后重新尝试启动Flipper。

三、Redux状态查看方案 #

• Redux Logger控制台输出
  在Redux store中引入redux-logger中间件，所有状态变更会在Metro或Hermes控制台输出，包含action类型、前后state对比信息。
• Redux DevTools远程调试
  借助@redux-devtools/remote实现远程状态监控：
  1. 安装依赖：npm install @redux-devtools/remote
  2. 配置store：

     import { composeWithDevTools } from '@redux-devtools/remote';
     const store = createStore(
       rootReducer,
       composeWithDevTools({
         hostname: 'localhost',
         port: 8000,
       })
     );
     

  3. 启动远程服务：npx @redux-devtools/cli --port=8000
  4. 打开浏览器访问http://localhost:8000即可查看Redux状态流。
• App内嵌入调试面板
  在debug模式下自定义一个简单的组件，或者使用react-native-debug-panel，直接在App内展示当前Redux state，快速验证状态变化。

内容的提问来源于stack exchange，提问作者morganTrudeau