React Native,克隆的仓库有Reactotron代码,现在我想使用它,但是没有连接

时间:2019-05-16 01:41:55

标签: react-native reactotron

所以我从Github克隆了一个React Native应用程序,注意到这个叫做Reactotron的软件包,我想知道什么?我查了一下,嗯,很好,就像Redux DevTools一样,为什么不利用它的功能呢?

我下载了适用于Mac的Reactotron UI,并且已经多次刷新模拟器,并且没有连接。

这是我第一次学习这个听起来不错的工具。

这是我看到Reactotron设置的代码库,就像InfiniteRed的家伙建议的那样:

import Reactotron, {
  trackGlobalErrors,
  openInEditor,
  networking,
} from 'reactotron-react-native';
import {reactotronRedux} from 'reactotron-redux';

Reactotron.configure({
  name: 'AppName - Mobile',
})
  .useReactNative()
  .use(reactotronRedux())
  .use(trackGlobalErrors())
  .use(openInEditor())
  .use(networking());

//eslint-disable-next-line
if (__DEV__) {
  Reactotron.connect();
  Reactotron.clear();
  //eslint-disable-next-line
  debug = (title, data={}) =>
    Reactotron.display({
      name: title,
      value: data,
      preview: JSON.stringify(data).substr(0, 50),
    });
}

此代码中是否缺少任何可以解释我缺乏连接的东西?

package.json文件中没有任何文件可以提供建立连接的脚本:

{
  "name": "AppName",
  "version": "3.0",
  "private": true,
  "scripts": {
    "start": "nps",
    "test": "nps setup",
    "build": "nps build",
    "setup": "nps setup && nps appcenter",
    "postinstall": "rm -f ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json"
  },
  "dependencies": {
    "appcenter": "1.2.0",
    "appcenter-analytics": "1.2.0",
    "appcenter-crashes": "1.2.0",
    "axios": "0.16.2",
    "date-fns": "1.29.0",
    "lodash": "4.17.4",
    "moment": "2.20.1",
    "payment": "2.3.0",
    "prop-types": "15.6.0",
    "react": "16.2.0",
    "react-native": "0.53.3",
    "react-native-autoheight-webview": "0.6.1",
    "react-native-calendar-events": "1.6.1",
    "react-native-device-info": "0.21.5",
    "react-native-exception-handler": "2.8.9",
    "react-native-image-progress": "1.0.1",
    "react-native-immediate-phone-call": "1.0.0",
    "react-native-input-scroll-view": "1.6.7",
    "react-native-keyboard-aware-scroll-view": "0.4.4",
    "react-native-keyboard-manager": "4.0.13-12",
    "react-native-material-buttons": "0.5.0",
    "react-native-material-dropdown": "0.5.2",
    "react-native-material-tabs": "3.5.0",
    "react-native-material-textfield": "0.10.0",
    "react-native-onesignal": "3.2.12",
    "react-native-popup-menu": "0.8.3",
    "react-native-sentry": "0.32.0",
    "react-native-size-matters": "0.1.0",
    "react-native-spinkit": "1.1.1",
    "react-native-splash-screen": "3.0.6",
    "react-native-svg": "6.3.1",
    "react-native-swipe-view": "https://github.com/jjd314/react-native-swipe-view",
    "react-native-vector-icons": "^6.4.2",
    "react-native-xcode-packager": "0.1.0",
    "react-navigation": "1.5.11",
    "react-redux": "5.0.6",
    "recompose": "0.26.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "replace-in-file": "3.1.1"
  },
  "devDependencies": {
    "async": "2.6.0",
    "babel-cli": "6.24.1",
    "babel-eslint": "8.0.2",
    "babel-jest": "23.0.0",
    "babel-plugin-module-resolver": "3.0.0",
    "babel-preset-env": "1.4.0",
    "babel-preset-flow": "6.23.0",
    "babel-preset-react-native": "4.0.0",
    "babel-preset-stage-2": "6.24.1",
    "babel-watch": "2.0.6",
    "chalk": "1.1.3",
    "detox": "8.2.3",
    "eslint": "4.12.0",
    "eslint-import-resolver-babel-module": "4.0.0-beta.3",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-prettier": "2.3.1",
    "eslint-plugin-react": "7.5.1",
    "flow-bin": "0.46.0",
    "fs-extra": "5.0.0",
    "jest": "23.6.0",
    "nps": "5.7.1",
    "nps-utils": "1.5.0",
    "patch-package": "5.1.1",
    "postinstall-prepare": "1.0.1",
    "prettier": "1.8.2",
    "prettier-eslint": "8.2.2",
    "react-test-renderer": "16.2.0",
    "reactotron-react-native": "1.14.0",
    "reactotron-redux": "1.13.0",
    "redux-mock-store": "1.3.0",
    "yargs": "8.0.1"
  },
  "jest": {
    "preset": "react-native",
    "setupTestFrameworkScriptFile": "./jest-setup.js",
    "transformIgnorePatterns": [
      "/node_modules/(?!parse)/"
    ],
    "unmockedModulePathPatterns": [
      "react",
      "react-navigation",
      "axios",
      "redux",
      "redux-thunk",
      "lodash",
      "date-fns"
    ],
    "verbose": true
  },
  "detox": {
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/NFIBEngage.app",
        "build": "xcodebuild -workspace ios/NFIBEngage.xcworkspace -configuration Debug -scheme NFIBEngage -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 6"
      }
    },
    "test-runner": "jest"
  }
}

将Reactotron配置文件导入到App.js文件中,如下所示:

//eslint-disable-next-line
console.ignoredYellowBox = ["Setting a timer"];
import './ReactotronConfig';
import React, {PureComponent} from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
  Linking,
  Platform,
  Alert,
} from 'react-native';
import {applyMiddleware, compose, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import Reactotron from 'reactotron-react-native';
import logger from 'logger';
import OneSignal from 'react-native-onesignal';
import SplashScreen from 'react-native-splash-screen';
import {Sentry} from 'react-native-sentry';
import {
  setJSExceptionHandler,
  setNativeExceptionHandler,
} from 'react-native-exception-handler';
import {jsHandler, nativeHandler} from 'utils/error-handlers';

import RootNavigation from 'navigation/RootNavigation';
import LocalStorage from 'services/LocalStorage';
import reducers from 'reducers';
import {
  setCurrentUser,
  validateUserInformationForVoterVoice,
} from 'auth/loginActions';
import {handleEventsDeepLink} from 'events/actions';
import {handleBallotsDeepLink} from 'surveys-ballots/actions';
import {setResetPasswordKey} from 'auth/registrationActions';
import {setNotificationData, deepLinkReceived} from 'navigation/actions';
import {view} from 'utils/view';
import {v2Colors} from 'theme';
import env from 'env';
import base from 'base-endpoint';
import * as appcenter from 'utils/appcenterLogger';
import * as cache from 'utils/cache';
import * as regex from 'utils/helpers/regex';

const appReducer = combineReducers({
  ...reducers,
});
const middleware = applyMiddleware(thunkMiddleware);
//react-native-debugger config
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = Reactotron.createStore(appReducer, composeEnhancers(middleware));

1 个答案:

答案 0 :(得分:1)

您需要在以下位置导入reactotron配置文件:  -App.js(如果您的项目是使用Create React Native App创建的)或  -第1行上的index.js

导入'pathtofile / ReactotronConfig.js';

您也可以查看此链接以获取入门指南。 https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md

我从头开始创建了一个项目,对我来说确实有用,看来问题在于这两个软件包的版本,请尝试从以下两个版本更新它们:

  
    

“ reactotron-react-native”:“ 1.14.0”,

         

“ reactotron-redux”:“ 1.13.0”

  

至:

  
    

“ reactotron-react-native”:“ ^ 3.5.0”,

         

“ reactotron-redux”:“ ^ 3.1.0”