Question

这是我的app.js

const AppStackNavigator = createStackNavigator({
  Login:{ screen: Login  },
  DrawerNav: {  screen: DrawerNavigator },
})

class App extends React.Component{
  render() {
    return (
      <AppStackNavigator/>
    )
  }
}

export default createAppContainer(AppStackNavigator);

这是DrawerNavigator.js文件

class HomeScreen extends React.Component {

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Header>
          <Left>
            <Icon name = "menu" onPress={() =>  this.props.navigation.openDrawer()}/>
          </Left>
        </Header>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button
            title="Toggle"
            onPress={() => this.props.navigation.toggleDrawer()}
          />
        </View>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button
          title="Toggle Drawer"
          onPress={() => this.props.navigation.toggleDrawer()}
        />
      </View>
    );
  }
}

const CustomDrawerComponent = (props)=>(
  <SafeAreaView>
    <View style={{height:150, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
      <Image source={require('./logo.png')} style={{height:120, width:120, borderRadius:60}} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView> )


const navigator =  createDrawerNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: {drawerLabel: 'HomeScreen',}
  },

  SettingsScreen: {
    screen: SettingsScreen,
    navigationOptions: {drawerLabel: 'SettingsScreen',}
  }},
  {   
    drawerPosition :"left",   contentComponent:CustomDrawerComponent
  });

export default createAppContainer(navigator);

这是login.js

class Login extends React.Component{
  constructor(props){
    super(props);
  }


  static navigationOptions = {
    title:'Welcome',
    headerLeft: 
      <View style={{paddingLeft:16}}>
        <Icon
          name="md-menu"
          size={30}
          color='black'
          onPress={() => this.props.navigation.openDrawer()} />
      </View>
  }


  loginHandler= ()=>{
    //this.props.navigation.navigate('DrawerNav')
    this.props.navigation.openDrawer()
  }

  render(){
    return(
      <View style={styles.container}>
        <View style={{alignItems:'center'}}>
          <Button
            title={'Login'}
            onPress={this.loginHandler.bind(this)}/>
        </View>
      </View>
    )
  }
}

export default Login;

现在，每当我单击图标打开导航抽屉时，就会出现未定义的错误，不是对象（评估_this2.props.navigation）。我尝试了许多可能的方法，但无法解决此问题。如何解决此问题？我已经在堆栈导航器中注册了登录组件，然后登录组件也无法访问导航道具。

onPress={() => this.props.navigation.openDrawer()}

错误描述了login.js静态块内的这一行包含错误

未定义不是React导航道具中的对象

0 个答案: