rnconsole

react-native 版本的vConsole

功能

• JS 日志: console.log|info|error|...
• JS 网络请求: XMLHttpRequest
• 自定义插件

快速入门

• 注意：该库引入valtio和react-native-device-info作为peerDependencies，宿主项目需要确保安装了这些依赖

  "peerDependencies": {
    "react": "16.9.0",
    "react-native": "0.61.4",
    "react-native-device-info": "^10.3.0",
    "valtio": "^1.9.0"
  }

• 安装依赖

  npm i rnconsole
  # 或yarn
  yarn add rnconsole
  # 或pnpm
  pnpm add rnconsole

• 引入RNConsoleComponent即可

  import { RNConsoleComponent } from 'rnconsole'
  
  ...
  <RNConsoleComponent />
  ...

• 图标功能说明：

  | 图标 | 功能 | | :----------------------------------------------------------: | :------------: | | | 隐藏面板 | | | 最大化面板 | | | 最小化面板 | | | 打开系统信息页 | | | 打开设置页 | | | 打开帮助页 |

API

• 若需要手动控制RNConsoleComponent的可见性，可通过RNConsole.instance?.showSwitch()/hideSwitch()控制。此外，还可通过在RNConsoleComponent上设置withCloseButton属性给予入口处一个关闭按钮：

  // 展示RNConsole入口
  RNConsole.instance?.showSwitch()
  // 隐藏RNConsole入口
  RNConsole.instance?.hideSwitch()
  
  ...
  <RNConsoleComponent withCloseButton={true} />
  ...

• 若需要添加自定义插件，需要先实例化RNConsolePlugin并传入插件 ID 及插件名称；若插件需要展示面板，则要添加renderTab事件，并在回调函数中渲染面板组件；最后再添加插件实例：

  import { IRNConsolePluginEvent, RNConsole, RNConsolePlugin } from "rnconsole";
    
  const MyPlugin = () => <Text>My plugin</Text>;
  const myPlugin = new RNConsolePlugin("myPlugin", "我的");
  myPlugin.on("renderTab", (render: IRNConsolePluginEvent) => render(MyPlugin));
  RNConsole.instance?.addPlugin(myPlugin);

开发

• 使用 npm7+进行依赖安装，否则 peerDependencies 无法自动安装

  npm i

• 通过 Rollup 进行构建并监听变动：

  npm run dev

• React Native 无法使用 symlinks 进行调试，需要借助wml：

  npm i -g wml
  # add the link to wml using `wml add <src> <dest>`
  wml add ~/my-package ~/main-project/node_modules/my-package
  # start watching all links added
  npm run wml

• MacOS 首次运行 wml 需要先执行：

  watchman watch /usr/local/lib/node_modules/wml/src

• Windows 首次运行 wml 需要先执行：

  # npmGlobalPrefix 可以通过 `npm prefix -g` 获取
  $ watchman watch ${npmGlobalPrefix}\node_modules\wml\src
  # 一定要重启电脑让配置生效！

• 修改 .watchmanconfig 之后需要清空 watchman 缓存：npm run wml:clean