react-native flipper(M1崩溃问题)调试

之前一直比较烦flipper，因为经常性安装flipper之后，build就会失败，所以很多时候我直接注释掉pod里面flipper的相关代码，最近因为一直在进行接口调试方面的工作，而chrome显然不能看rn的network，react-native-debugger可以看，但是我用了apollo之后，它也不能看了（当然官方说给它装插件之后是可以的，我也成功了，但是感觉不方便，所以想起来了flipper)。
几天使用flipper过程非常不顺，花了我一下午时间，才勉强搞明白这个东西怎么用：
指定最新版本：

 use_flipper!({ 'Flipper' => '0.98.0' })

指定版本之后，我们arch -x86_64 pod install(M1 适配命令)发现：

原先的版本竟然是0.54，而最新版本是0.98，想要查看最新版本，请运行：

npm info flipper

image.png

安卓的话：
修改android/gradle.properties,FLIPPER_VERSION=0.98.0.
062之上的rn，只需要做这些工作，如果你运行顺利的话，甚至连上面的步骤都不用，直接下载flipperapp即可，可惜我一直不顺利，报各种错：
其一：

271626337593_.pic_hd.jpg

折腾好久，发现是M1电脑的问题，需要修改：

image.png
如果版本是0.63.4的话，需要修改podprofile文件：

 use_flipper!({ 'Flipper' => '0.98.0' })
  post_install do |installer|
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
        end
      end
  end

如果是最新版本的react-native（目前是0.64.2），需要做如下修改：

use_flipper!
  post_install do |installer|
      react_native_post_install(installer)
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
        end
      end
  end

这样之后，当我们运行app，打开flipper之后，

image.png

flipperyou很多自定义插件，也可以自己写插件

image.png
这块怎么用，还没有研究明白，应该是配合

react-native-filpper

这个库用，
https://www.npmjs.com/package/react-native-flipper，简单试了一下：

import { addPlugin } from "react-native-flipper";
if (__DEV__ || true) {
  const mammals = [
    {
      id: "Polar Bear",
      title: "Polar Bear",
      url:
        "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Ursus_maritimus_4_1996-08-04.jpg/190px-Ursus_maritimus_4_1996-08-04.jpg",
    },
    {
      id: "Sea Otter",
      title: "Sea Otter",
      url:
        "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Sea_otter_cropped.jpg/220px-Sea_otter_cropped.jpg",
    },
    {
      id: "West Indian Manatee",
      title: "West Indian Manatee",
      url:
        "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/FL_fig04.jpg/230px-FL_fig04.jpg",
    },
    {
      id: "Bottlenose Dolphin",
      title: "Bottlenose Dolphin",
      url:
        "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Tursiops_truncatus_01.jpg/220px-Tursiops_truncatus_01.jpg",
    },
  ];
  // minimal plugin that connects to sea-mammals plugin
  addPlugin({
    getId() {
      return "sea-mammals";
    },
    onConnect(connection) {
      mammals.forEach((m) => {
        connection.send("newRow", m);
      });
    },
    onDisconnect() {},
  });
}

是可以把地方三房库添加来用的：

image.png

有人知道怎么用的，可以留言教教我……