首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React Native,克隆的repo有Reactotron代码,现在我想使用它,但没有连接

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

Stack Overflow用户
提问于 2019-05-16 09:41:55
回答 1查看 865关注 0票数 0

所以我从Github克隆了一个React Native应用程序,并注意到了这个名为Reactotron的包,我想知道这是什么?我查了一下,它就像Redux DevTools,为什么不利用它的功能呢?

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

这是我第一次了解这个工具,听起来很棒。

这是我在InfiniteRed的人建议的Reactotron设置的代码库:

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));
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-17 00:48:42

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

导入'pathtofile/ReactotronConfig.js';

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

我从头开始创建了一个项目,它确实对我有效。似乎问题出在这两个包的版本上,尝试从以下位置更新它们:

“反应式反应原生”:"1.14.0",

"reactotron-redux":"1.13.0"

至:

"reactotron-react-native":"^3.5.0",

"reactotron-redux":"^3.1.0"

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56159687

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档