Reactoron能改善React Native开发体验。
Reactoron这个开发工具，把我们输出的日志像twitter信息流一样保存起来，等我们需要的时候，可以回过头过滤找到日志，展开日志详情查看。提高ReactNative开发效率。 看日志会特别方便，体验也不错。
项目地址： 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()
.useReactNative()
.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;
ignoreUrls?: RegExp;
}
|
例子：
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面板上看到：
其他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
