React-Native调试工具

Redux的调试，除了最基本的打断点进去调试之外，还有一个好用的调试工具reactotron，它能够帮你清楚的记录你所发出的action，以及http请求，可以帮你更好的分析redux的结构。

下面说一下简单的配置

• package.json中的添加

devDependencies: {  "reactotron-apisauce": "^1.11.1",    "reactotron-react-native": "^1.11.1",    "reactotron-redux": "^1.11.2",    "reactotron-redux-saga": "^1.11.1"}

• 修改store.js文件

import Reactotron from 'reactotron-react-native';import { composeWithDevTools } from 'redux-devtools-extension';import '../ReactotronConfig';  const sagaMiddleware = createSagaMiddleware({     sagaMonitor: Reactotron.createSagaMonitor(),   }); const store = Reactotron.createStore(     xxReducer,     composeWithDevTools(middleware),  );

• ReactotronConfig.js文件

import Reactotron, { networking } from 'reactotron-react-native';import { reactotronRedux as reduxPlugin } from 'reactotron-redux';import sagaPlugin from 'reactotron-redux-saga';/* eslint no-console:0 */console.disableYellowBox = true;Reactotron.configure({ name: 'ReactNativeSinooa' }); // controls connection & communication settingsReactotron.useReactNative(); // add all built-in react native pluginsReactotron.use(reduxPlugin());Reactotron.use(sagaPlugin());Reactotron.use(networking());// if we're running in DEV mode, then let's connect!/* eslint no-undef:0 */if (__DEV__) {  Reactotron.connect();  Reactotron.clear();}

DOM结构查看

可以查看dom结构的react devtools。

只需要在index.ios.js和index.android.js文件中引入import 'react-devtools';即可。

import 'react-devtools'; // 引入，需要执行`yarn add react-devtools `import { AppRegistry } from 'react-native';import APP from './src/APP';AppRegistry.registerComponent('workflow', () => APP);

然后在

//package.json中添加` "devtools": "react-devtools"`类似下面这样"scripts": {    "start": "node node_modules/react-native/local-cli/cli.js start",    "test": "jest",    "devtools": "react-devtools"  },

然后在命令行执行yarn run devtools即可。

配合ios模拟器可以方便进行查找dom元素。