RY 's Blog

ReactNative开发-神器Reactoron

2019-05-23

Reactoron能改善React Native开发体验。

Reactoron这个开发工具，把我们输出的日志像twitter信息流一样保存起来，等我们需要的时候，可以回过头过滤找到日志，展开日志详情查看。提高ReactNative开发效率。 看日志会特别方便，体验也不错。

image

项目地址： GitHub - infinitered/reactotron: A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

下载最新的release包，本地安装。

使用

1. 集成在React Native项目中

1
2
3
npm i --save-dev reactotron-react-native
// or
yarn add reactotron-react-native --dev

2. 配置文件

创建ReactotronConfig.js

基础用法：

1
2
3
4
5
6
import Reactotron from 'reactotron-react-native'

Reactotron
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

高级配置: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Reactotron from 'reactotron-react-native'

Reactotron
  .configure({
    name: "React Native Demo"
  })
  .useReactNative({     
      asyncStorage: {ignore: []},
      networking: {
          ignoreUrls: new RegExp(`http://127.0.0.1:19000/logs`)
      },
      editor: false,
      errors: {veto: (stackFrame) => false},
      overlay: false,})
  .connect();

asyncStorage

参数类型：

1
2
3
export interface AsyncStorageOptions {
    ignore?: string[];
}

ignore的值，传入key数组，reactotron不会展示这些key的存储数据

networking

参数类型：

1
2
3
4
export interface NetworkingOptions {
    ignoreContentTypes?: RegExp; // 如果response的Content-Type匹配上这个正则表达式，不展示response，
    ignoreUrls?: RegExp; //  要忽略的urls
}

例子：
networking({
1
2
3
  ignoreContentTypes: /^(image)\/.*$/i,
  ignoreUrls: /\/(logs|symbolicate)$/,
})

Error

参数类型：

1
2
3
export interface TrackGlobalErrorsOptions {
    veto?: (frame: any) => boolean;
}

veto函数，我们可以通过它指定我们不想看到的堆栈信息.这里的frame指stack frame.

比如： 如下忽略报错时所有react-native module里头的stack frame.

1
2
3
4
5
6
Reactotron
  .configure()
  .use(trackGlobalErrors({
    veto: frame => frame.fileName.indexOf('/node_modules/react-native/') >= 0
   }))
  .connect()

3. improt

在App.js 或者index.js文件头中引入：

1
2
3
if(__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

4. 打点

像用console.log一样，调用 Reactotron.log

ReactNative项目跑起来后，可以在Reactotron面板上看到：

9b1dbee4.png

其他API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Reactotron.log({ numbers: [1, 2, 3], boolean: false, nested: { here: 'we go' } })

Reactotron.warn('*glares*')
Reactotron.error('Now you\'ve done it.')
Reactotron.display({
  name: 'KNOCK KNOCK',
  preview: 'Who\'s there?',
  value: 'Orange.'
})

Reactotron.display({
  name: 'ORANGE',
  preview: 'Who?',
  value: 'Orange you glad you don\'t know me in real life?',
  important: true
})

Redux的数据信息

reactotron/plugin-redux.md at master · infinitered/reactotron · GitHub

YouTube

Tags: React Native Dev
← LeetCode:542. 01 Matrix-DP LeetCode:413. Arithmetic Slices →

scan qr code and share this article