在反應原生中創建應用程序導航錯誤

Question

我正在處理反應原生應用程序樣本。在我使用了<NavigationExperimental.Navigator>最初App.js文件，並安裝了導航反應母語棄用的定製組件，但我發現錯誤

任何人都可以請建議我，如何解決這個問題。

的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薩爾我在./node_modules/react-native-deprecated-custom-components/NavigatorBreadcrumbNavigationBar.js文件有錯誤 組件

'use strict'; 

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

import'prop-types'的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'

它應該工作之後