Question

我正在研究示例react-native app。因为我最初在App.js文件中使用了<NavigationExperimental.Navigator>并安装了react-native-deprecated-custom-components用于导航，但我收到了错误

任何人都可以建议我，如何解决这个问题。

的package.json

{
    "name": "sampleApp",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-beta.5",
        "react-native": "0.49.3",
        "fiber-react-native-elevated-view": "^0.2.2",
        "moment": "^2.19.1",
        "react-native-communications": "^2.2.1",
        "react-native-datepicker-dialog": "0.0.6",
        "react-native-deprecated-custom-components": "^0.1.1",
        "react-native-easy-grid-view": "^0.1.1",
        "react-native-elevated-view": "0.0.4",
        "react-native-linear-gradient": "^2.3.0",
        "react-native-maps": "^0.16.4",
        "react-native-modal-picker": "0.0.16",
        "react-native-modal-selector": "0.0.20",
        "react-navigation": "^1.0.0-beta.13"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0-beta.5"
    },
    "jest": {
        "preset": "react-native"
    }
}

你好@Stan Sarr我在./node_modules/react-native-deprecated-custom-components/NavigatorBreadcrumbNavigationBar.js文件中收到错误成分

'use strict';

import {
  Platform,
  StyleSheet,
  View,
  ViewPropTypes,
} from 'react-native';
import React from 'react';

从＆＃39; prop-types＆＃39;;

导入PropTypes

const NavigatorBreadcrumbNavigationBarStyles = require('./NavigatorBreadcrumbNavigationBarStyles');
const NavigatorNavigationBarStylesAndroid = require('./NavigatorNavigationBarStylesAndroid');
const NavigatorNavigationBarStylesIOS = require('./NavigatorNavigationBarStylesIOS');

const guid = require('./guid');
const invariant = require('fbjs/lib/invariant');

const { Map } = require('immutable');

const Interpolators = NavigatorBreadcrumbNavigationBarStyles.Interpolators;
const NavigatorNavigationBarStyles = Platform.OS === 'android' ?
  NavigatorNavigationBarStylesAndroid : NavigatorNavigationBarStylesIOS;


/**
 * Reusable props objects.
 */
const CRUMB_PROPS = Interpolators.map(() => ({style: {}}));
const ICON_PROPS = Interpolators.map(() => ({style: {}}));
const SEPARATOR_PROPS = Interpolators.map(() => ({style: {}}));
const TITLE_PROPS = Interpolators.map(() => ({style: {}}));
const RIGHT_BUTTON_PROPS = Interpolators.map(() => ({style: {}}));


function navStatePresentedIndex(navState) {
  if (navState.presentedIndex !== undefined) {
    return navState.presentedIndex;
  }
  // TODO: rename `observedTopOfStack` to `presentedIndex` in `NavigatorIOS`
  return navState.observedTopOfStack;
}


/**
 * The first route is initially rendered using a different style than all
 * future routes.
 *
 * @param {number} index Index of breadcrumb.
 * @return {object} Style config for initial rendering of index.
 */
function initStyle(index, presentedIndex) {
  return index === presentedIndex ? NavigatorBreadcrumbNavigationBarStyles.Center[index] :
    index < presentedIndex ? NavigatorBreadcrumbNavigationBarStyles.Left[index] :
    NavigatorBreadcrumbNavigationBarStyles.Right[index];
}

class NavigatorBreadcrumbNavigationBar extends React.Component {
  static propTypes = {
    navigator: PropTypes.shape({
      push: PropTypes.func,
      pop: PropTypes.func,
      replace: PropTypes.func,
      popToRoute: PropTypes.func,
      popToTop: PropTypes.func,
    }),
    routeMapper: PropTypes.shape({
      rightContentForRoute: PropTypes.func,
      titleContentForRoute: PropTypes.func,
      iconForRoute: PropTypes.func,
    }),
    navState: React.PropTypes.shape({
      routeStack: React.PropTypes.arrayOf(React.PropTypes.object),
      presentedIndex: React.PropTypes.number,
    }),
    style: ViewPropTypes.style,
  };

  static Styles = NavigatorBreadcrumbNavigationBarStyles;

  _updateIndexProgress(progress, index, fromIndex, toIndex) {
    var amount = toIndex > fromIndex ? progress : (1 - progress);
    var oldDistToCenter = index - fromIndex;
    var newDistToCenter = index - toIndex;
    var interpolate;
    invariant(
      Interpolators[index],
      'Cannot find breadcrumb interpolators for ' + index
    );
    if (oldDistToCenter > 0 && newDistToCenter === 0 ||
        newDistToCenter > 0 && oldDistToCenter === 0) {
      interpolate = Interpolators[index].RightToCenter;
    } else if (oldDistToCenter < 0 && newDistToCenter === 0 ||
               newDistToCenter < 0 && oldDistToCenter === 0) {
      interpolate = Interpolators[index].CenterToLeft;
    } else if (oldDistToCenter === newDistToCenter) {
      interpolate = Interpolators[index].RightToCenter;
    } else {
      interpolate = Interpolators[index].RightToLeft;
    }

    if (interpolate.Crumb(CRUMB_PROPS[index].style, amount)) {
      this._setPropsIfExists('crumb_' + index, CRUMB_PROPS[index]);
    }
    if (interpolate.Icon(ICON_PROPS[index].style, amount)) {
      this._setPropsIfExists('icon_' + index, ICON_PROPS[index]);
    }
    if (interpolate.Separator(SEPARATOR_PROPS[index].style, amount)) {
      this._setPropsIfExists('separator_' + index, SEPARATOR_PROPS[index]);
    }
    if (interpolate.Title(TITLE_PROPS[index].style, amount)) {
      this._setPropsIfExists('title_' + index, TITLE_PROPS[index]);
    }
    var right = this.refs['right_' + index];

    const rightButtonStyle = RIGHT_BUTTON_PROPS[index].style;
    if (right && interpolate.RightItem(rightButtonStyle, amount)) {
      right.setNativeProps({
        style: rightButtonStyle,
        pointerEvents: rightButtonStyle.opacity === 0 ? 'none' : 'auto',
      });
    }
  }

  updateProgress(progress, fromIndex, toIndex) {
    var max = Math.max(fromIndex, toIndex);
    var min = Math.min(fromIndex, toIndex);
    for (var index = min; index <= max; index++) {
      this._updateIndexProgress(progress, index, fromIndex, toIndex);
    }
  }

  onAnimationStart(fromIndex, toIndex) {
    var max = Math.max(fromIndex, toIndex);
    var min = Math.min(fromIndex, toIndex);
    for (var index = min; index <= max; index++) {
      this._setRenderViewsToHardwareTextureAndroid(index, true);
    }
  }

  onAnimationEnd() {
    var max = this.props.navState.routeStack.length - 1;
    for (var index = 0; index <= max; index++) {
      this._setRenderViewsToHardwareTextureAndroid(index, false);
    }
  }

  _setRenderViewsToHardwareTextureAndroid(index, renderToHardwareTexture) {
    var props = {
      renderToHardwareTextureAndroid: renderToHardwareTexture,
    };

    this._setPropsIfExists('icon_' + index, props);
    this._setPropsIfExists('separator_' + index, props);
    this._setPropsIfExists('title_' + index, props);
    this._setPropsIfExists('right_' + index, props);
  }

  componentWillMount() {
    this._reset();
  }

  render() {
    var navState = this.props.navState;
    var icons = navState && navState.routeStack.map(this._getBreadcrumb);
    var titles = navState.routeStack.map(this._getTitle);
    var buttons = navState.routeStack.map(this._getRightButton);

    return (
      <View
        key={this._key}
        style={[styles.breadCrumbContainer, this.props.style]}>
        {titles}
        {icons}
        {buttons}
      </View>
    );
  }

  immediatelyRefresh() {
    this._reset();
    this.forceUpdate();
  }

  _reset() {
    this._key = guid();
    this._descriptors = {
      title: new Map(),
      right: new Map(),
    };
  }

  _getBreadcrumb = (route, index) => {
    /**
     * To prevent the case where titles on an empty navigation stack covers the first icon and
     * becomes partially unpressable, we set the first breadcrumb to be unpressable by default, and
     * make it pressable when there are multiple items in the stack.
     */
    const pointerEvents = (
      (this.props.navState.routeStack.length <= 1 && index === 0) ?
      'none' :
      'auto'
    );
    const navBarRouteMapper = this.props.routeMapper;
    const firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));

    var breadcrumbDescriptor = (
      <View
        key={'crumb_' + index}
        pointerEvents={pointerEvents}
        ref={'crumb_' + index}
        style={firstStyles.Crumb}>
        <View ref={'icon_' + index} style={firstStyles.Icon}>
          {navBarRouteMapper.iconForRoute(route, this.props.navigator)}
        </View>
        <View ref={'separator_' + index} style={firstStyles.Separator}>
          {navBarRouteMapper.separatorForRoute(route, this.props.navigator)}
        </View>
      </View>
    );

    return breadcrumbDescriptor;
  };

  _getTitle = (route, index) => {
    if (this._descriptors.title.has(route)) {
      return this._descriptors.title.get(route);
    }

    var titleContent = this.props.routeMapper.titleContentForRoute(
      this.props.navState.routeStack[index],
      this.props.navigator
    );
    var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));

    var titleDescriptor = (
      <View
        key={'title_' + index}
        ref={'title_' + index}
        style={firstStyles.Title}>
        {titleContent}
      </View>
    );
    this._descriptors.title = this._descriptors.title.set(route, titleDescriptor);
    return titleDescriptor;
  };

  _getRightButton = (route, index) => {
    if (this._descriptors.right.has(route)) {
      return this._descriptors.right.get(route);
    }
    var rightContent = this.props.routeMapper.rightContentForRoute(
      this.props.navState.routeStack[index],
      this.props.navigator
    );
    if (!rightContent) {
      this._descriptors.right = this._descriptors.right.set(route, null);
      return null;
    }
    var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
    var rightButtonDescriptor = (
      <View
        key={'right_' + index}
        ref={'right_' + index}
        style={firstStyles.RightItem}>
        {rightContent}
      </View>
    );
    this._descriptors.right = this._descriptors.right.set(route, rightButtonDescriptor);
    return rightButtonDescriptor;
  };

  _setPropsIfExists(ref, props) {
    var ref = this.refs[ref];
    ref && ref.setNativeProps(props);
  }
}

const styles = StyleSheet.create({
  breadCrumbContainer: {
    overflow: 'hidden',
    position: 'absolute',
    height: NavigatorNavigationBarStyles.General.TotalNavHeight,
    top: 0,
    left: 0,
    right: 0,
  },
});

module.exports = NavigatorBreadcrumbNavigationBar;

Answer 1

您的使用反应16.0.0-beta.5。 Proptypes现在有自己的模块。

使用yarn add prop-types或npm i --save prop-types安装道具类型，然后将其导入：import PropTypes from 'prop-types'

它应该在那之后工作

在react-native中为创建的应用程序获取导航错误

1 个答案: