undefined不是一個函數評估_this2.props.navigator.push

我想支架一個簡單的抽屜和反應原生導航。undefined不是一個函數評估_this2.props.navigator.push

正如你所看到的，我導入了抽屜，然後我在工具欄下面實例化了導航器。

我希望能夠改變從AppDrawer的路線，但唯一的按鈕，點擊後，我得到的是

*不確定是不是（評估「_this2.props.navigator.push的函數（{ id：'component5'}）'）*

注：我沒有附加組件3或5的代碼，因爲它們是簡單的文本渲染。

index.android.js

import React, {Component} from 'react'; 
import {AppRegistry, StyleSheet, Text, View, Navigator, ToolbarAndroid} from 'react-native'; 

import Component3 from "./app/components/Component3/Component3"; 
import Component5 from "./app/components/Component5/Component5"; 


import MyAppDrawer from "./app/components/Miscellaneous/AppDrawer"; 
import Drawer from 'react-native-drawer'; 


const drawerStyles = { 
    drawer: { 
     shadowColor: "#343477", 
     shadowOpacity: 0.8, 
     shadowRadius: 0, 
    } 
} 


export default class ReactTest extends Component { 

    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      drawerType: 'overlay', 
      openDrawerOffset: 50, 
      closedDrawerOffset: 0, 
      panOpenMask: .1, 
      panCloseMask: .9, 
      relativeDrag: false, 
      panThreshold: .25, 
      tweenHandlerOn: false, 
      tweenDuration: 350, 
      tweenEasing: 'linear', 
      disabled: false, 
      tweenHandlerPreset: null, 
      acceptDoubleTap: false, 
      acceptTap: false, 
      acceptPan: true, 
      tapToClose: false, 
      negotiatePan: false, 
      rightSide: false, 
     }; 
    } 


    openDrawer() { 
     this.drawer.open() 
    } 


    renderScene(route, navigator) { 
     switch (route.id) { 
      case 'component2': 
       return (<Component2 navigator={navigator}/>) 
      case 'component3': 
       return (<Component3 navigator={navigator}/>) 
      case 'component4': 
       return (<Component4 navigator={navigator}/>) 
      case 'component5': 
       return (<Component5 navigator={navigator} title="component5"/>) 
      case 'component6': 
       return (<Component6 user={route.user} navigator={navigator} title="component6"/>) 
     } 
    } 

    onActionSelected(position) { 
     console.log("Settings clicked"); 
    } 

    onIconClicked(position) { 
     console.log("App Drawer clicked"); 
    } 


    render() { 
     var controlPanel = <MyAppDrawer navigator={navigator} closeDrawer={() => { 
      this.drawer.close(); 
     }}/> 
     return (


      <View style={styles.containerToolbar}> 


       <Drawer 
        ref={c => this.drawer = c} 
        type={this.state.drawerType} 
        animation={this.state.animation} 
        captureGestures={true} 
        openDrawerOffset={this.state.openDrawerOffset} 
        closedDrawerOffset={this.state.closedDrawerOffset} 
        panOpenMask={this.state.panOpenMask} 
        //panCloseMask={this.state.panCloseMask} 
        relativeDrag={this.state.relativeDrag} 
        panThreshold={this.state.panThreshold} 
        content={controlPanel} 
        styles={drawerStyles} 
        disabled={this.state.disabled} 
        // tweenHandler={this.tweenHandler.bind(this)} 
        // tweenDuration={this.state.tweenDuration} 
        // tweenEasing={this.state.tweenEasing} 
        acceptDoubleTap={this.state.acceptDoubleTap} 
        acceptTap={this.state.acceptTap} 
        acceptPan={this.state.acceptPan} 
        tapToClose={this.state.tapToClose} 
        negotiatePan={this.state.negotiatePan} 
        // changeVal={this.state.changeVal} 
        side={this.state.rightSide ? 'right' : 'left'} 
       > 
        <ToolbarAndroid 
         style={styles.toolbar} 
         title="MyApp" 
         // logo={require('./dummy_logo.png')} 
         navIcon={require("./navigation_icon.png")} 
         onActionSelected={this.onActionSelected} 
         onIconClicked={this.openDrawer.bind(this)} 
         titleColor="black" 
         actions={[ 
          {title: "Log out", show: "never"} 
         ]} 
        /> 
        <Navigator 
         style={styles.container} 
         initialRoute={{id: 'component3'}} 
         renderScene={this.renderScene}/> 
       </Drawer> 

      </View> 
     ); 
    } 


} 
const styles = StyleSheet.create({ 
    containerToolbar: { 
     flex: 1, 
     //justifyContent: 'center', 
     justifyContent: 'flex-start', 
     // https://github.com/facebook/react-native/issues/2957#event-417214498 
     alignItems: 'stretch', 
     backgroundColor: '#F5FCFF', 
    }, 
    toolbar: { 
     backgroundColor: '#e9eaed', 
     height: 56, 
    }, 

}); 


AppRegistry.registerComponent('ReactTest',() => ReactTest);

AppDrawer.js

進口反應，{元器件}從 '反應'; 從'react-native'導入{View，Text，Button，Navigator};

import styles from './styles'; 

export default class AppDrawer extends Component { 
    constructor() { 
     super(); 
    } 

    render() { 
     return (
      <View style={styles.controlPanel}> 
       <Text style={styles.controlPanelWelcome}> 
        Control Panel 
       </Text> 
       <Button 
        onPress={() => { 
         console.log("pressed"); 
         this.props.navigator.push({ 
          id: 'component5', 
         }); 
        }} 
        title="Component 5" 
       /> 
      </View> 
     ) 
    } 
}

來源

2017-05-16 Marios Kamperis

由於您的renderScene函數中沒有MyAppDrawer，因此您無權訪問導航器。您將需要添加一個引用並用它來獲取導航：

添加ref={navigator => this.navigator = navigator}到您的導航組件，那麼你可以做

<MyAppDrawer navigator={this.navigator} closeDrawer={() => { 
    this.drawer.close(); 
}}/>

來源

2017-05-16 22:17:37

也，這可能是一個好主意，外界把你的控制面板渲染並將其轉換爲返回組件的函數。 –

的確很好。已加入： ref = {navigator => this.navigator = navigator} 已修改： {this.drawer.close（）; }} /> 但我仍然收到相同的錯誤。 –

您使用的是什麼React Native版本？如果其RN 0.44，導航器已棄用。 –

undefined不是一個函數評估_this2.props.navigator.push

回答

相關問題