如何使用抽屉内的导航按钮？答案

【问题标题】：How to use a navigation button inside a drawer?如何使用抽屉内的导航按钮？
【发布时间】：2019-09-01 15:38:05
【问题描述】：

我在自定义抽屉中有一个按钮，但是当尝试在此按钮上使用跨屏导航方法时，我收到以下错误：Error

我正在使用：“react-navigation”：“^3.11.1”，“react-native”：“^0.60.4”，“react”：“16.8.6”。我正在使用 Android 8.0 在 S8 + 上调试应用程序

const DEVICE_WIDTH = Dimensions.get('window').width;
const CustomDrawerComponent = props => (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView>
      <View style={{flexDirection:'row', backgroundColor:'#006bb3', height:100, flex:1, justifyContent:'center'}}> 
        <View style={{height:100,width:60, borderRadius:30,justifyContent:'center'}}>
          <Image source={require('../../assets/no-login.png')} style={{height:40,width:40, borderRadius:20}}></Image>
        </View>
        <View style={{justifyContent:'center', height:100}}>
          <Text style={{color:'white', fontSize:15, fontWeight:'700'}}>Acesse sua conta agora!</Text>
          <Text style={{color:'white', fontSize:14, fontWeight:'600', textDecorationLine:'underline'}}>Clique aqui!</Text>
        </View>
      </View>
      <DrawerItems {...props} />
      <TouchableOpacity 
        style={{height:50, justifyContent:'center'}}
        onPress={this.logout}
        >
        <View style={{marginBottom:0, flexDirection:'row'}}>
          <View style={{marginLeft:14}}>
            <Icon name='login-variant'type='MaterialCommunityIcons' style={{color:'grey' ,fontSize:25}}/>
          </View>
          <View style={{marginLeft:27}}>
            <Text style={{fontSize:15, fontWeight:'700', color:'grey'}}> Sair da Conta</Text>
          </View>
        </View>
      </TouchableOpacity>
    </ScrollView>
  </SafeAreaView>
);

const AppDrawerNavigator = createDrawerNavigator(
  {
    Home:{
      screen:HomeScreen,
      navigationOptions:{
      drawerLabel:'Home',
      drawerIcon: ({tintColor}) =>
       (<Icon name='home'type='FontAwesome' style={{color:tintColor, fontSize:25}}/>) 
    },
    },
    HomeLogin:{
      screen:HomeLogin,
      navigationOptions:{
        drawerLabel: () => null,
      },
    },
  Login:{
      screen:LoginScreen,
      navigationOptions:{
        drawerLabel: () => null
      } 
  },
  Register:{
    screen:RegisterScreen,
    navigationOptions:{
      drawerLabel: () => null
    },
    headerStyle:{
      backgroundColor:'#006bb3',
    },
    headerTitleStyle:{
      fontWeight:'bold',
    },
    title:'Cadastre-se!'
  },
  },  
  {
    drawerWidth: DEVICE_WIDTH*0.7,
    initialRouteName:'Home',
    contentComponent: CustomDrawerComponent,
    contentOptions:{
      activeTintColor:'#006bb3',
      labelStyle:{
        fontSize:14,   
      }, 
    }
  }
);
logout = () =>{
  this.props.navigation.navigate('Login')
}
const Menu = createAppContainer(AppDrawerNavigator);
//export default connect(mapStateToProps, mapDispatchToProps) (Menu)
export default Menu

我希望单击“Sair da conta”按钮会导航到“登录”屏幕。

【问题讨论】：

标签： javascript react-native navigation-drawer react-navigation react-navigation-drawer

【解决方案1】：

您没有向对象提供道具。而且您不必使用简单的命令语法来创建函数。

onPress={() => this.props.navigation.navigate('Login')}
...
contentComponent: props => < CustomDrawerComponent {...props} />,

【讨论】：

感谢您的回复！我做了我推荐的，但是，我有以下错误：TypeError: undefined is not an object (evaluating '_this.props.navigation'
无需将函数传递给contentComponent 并手动传播道具，因为导航道具会自动传入。因此，您的错误告诉您由于某种原因没有发生这种情况。尝试记录您的道具以查看通过了什么
@leandror 有问题的代码是一个屏幕上的代码吗？如果您有一个屏幕代码，请将您的供应代码转移到另一个文件中。
大家好，感谢您的帮助！我发现使用另一种登录方法更好。我现在有一个为用户个人资料指定的页面，在这里我可以选择退出帐户。