如何在抽屉导航器中添加箭头返回按钮以在打开抽屉时关闭抽屉

Question

我正在尝试在右上角的抽屉内添加箭头后退按钮，它会在按下时关闭抽屉。我不确定我这样做是否正确？或者我应该在 Drawer 中放置一个 Stack Navigator 作为标题？如果有人帮助我，我会很高兴。

我正在使用 react-navigation V3。

这是我的代码：

import React from 'react';
import { Platform, Dimensions, View, Text, StyleSheet } from 'react-native';
import { createDrawerNavigator, createAppContainer, DrawerItems } from 'react-navigation';
import {Header, Button} from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';


import Header2 from './Header2'

class MenuButton1 extends React.Component {
  render () {
    const { onDrawerOpen } = this.props;
      return (
          <React.Fragment>   
          <Button
          icon={
           <Icon
             name="bars"
             size={30}
             color="white"
           />
          }
          onPress={() => onDrawerOpen()}
      />   
          </React.Fragment>
      )
  }
}



class HomeScreen extends React.Component {

    render(){
      return (
        <React.Fragment>
          <Header
            leftComponent={
              <MenuButton1 onDrawerOpen = {() => this.props.navigation.openDrawer()}/>
            }/>
        <View style={{top: 30 }}>
            <Text> Hello </Text>
        </View>
        </React.Fragment>
      );
    }
  }

 const CustomDrawerContentComponent = (props) => (
   <View style={{top:40}}>
    <Header 
      leftComponent={
        <Button
        icon={
          <Icon
            name="arrow-left"
            size={30}
            color="black"
          />
      }
      onPress= {() => this.props.navigation.closeDrawer()}/>}
    />
    <Text>Custom Header</Text>
    <DrawerItems {...props} />
    </View>
 ),

WIDTF = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTF*0.80,
    draertType: 'slide'    
}

const Drawer = createDrawerNavigator ({
  Home: {
    screen: HomeScreen
  },
    About: {
      screen: Header2
    }  
},
DrawerConfig,
{
  contentComponent: CustomDrawerContentComponent
});

export default createAppContainer (Drawer);

enter image description here

但它没有出现。

Answer 1

在这里，您可以将 Header 与默认组件一起使用，例如：

<Header
  leftComponent={{ icon: 'menu', color: '#fff' }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
  rightComponent={{ icon: 'home', color: '#fff' }}
/>

如上所述here

或者你可以这样做：

import {NavigationActions} from 'react-navigation'; //add this import to the Navigator.js file

 const DrawerNavigators = createDrawerNavigator({
Home:{
    screen: Home ,

navigationOptions: ({ navigation }) => ({
  headerStyle: {
  backgroundColor: 'black',
 headerTintColor: '#ffffff',
 tintColor: {
 color: '#ffffff'
},
headerTitleStyle: { color: 'black' }
},
}),
  }
   },{
    initialRouteName: 'Home',
    contentComponent: Drawers,
    drawerWidth: 300
});


  DrawerNavigators: {
    screen: DrawerNavigators,

    navigationOptions: ({ navigation }) => ({
      headerTintColor: '#ffffff',
      headerStyle: {
      backgroundColor: 'black',
      title: 'Home',
    },
    headerLeft: 
    <View style={{flex:1, flexDirection:'row'}}>
    <TouchableOpacity onPress={() =>
     navigation.toggleDrawer()
 }> 
    <Image style = {{margin :15 ,height :30 ,width :30}}
           source={require('./resources/menu.png')} />

    </TouchableOpacity>
    <TouchableOpacity onPress={()=> navigation.navigate('Home')}>
    <Text style={{width: 200, fontSize:15,padding:10, color:'white',marginTop:8}}>Home</Text>
    </TouchableOpacity>
</View>
    ,

  }),
  },

现在创建一个 Drawers.js 文件

import React, {Component} from 'react';
import {NavigationActions,StackActions} from 'react-navigation';
import PropTypes from 'prop-types';
import {ScrollView, Text, View ,AsyncStorage,Image,TouchableOpacity} from 'react-native';
import { DrawerActions } from 'react-navigation';
import styles from './Style.js'


class Drawer extends Component {

 constructor(props){
    super(props)
 const { navigation } = this.props;
    this.state = {
      my: '',
    }
}


  render () {

    return (
      <View style={{flex:1}}>
        <ScrollView>

       <View  style={styles.headertop}>
          <Image style={ styles.thumbnail } source={require('./resources/images.png')} />
          <Text style={styles.headertext}>Username</Text> 
          <Text style={{fontSize:13, color:'white',marginTop:40, marginLeft:155}}>Wallet Balance:</Text>
          <Text style={{fontSize:13, color:'white', marginTop:-20, marginLeft:260}}>$0.00</Text>
        </View>

<TouchableOpacity onPress={() =>  this.props.navigation.navigate('MyProfile')}>
            <View style={styles.menuItem}>
                 <Image style={styles.drawericon}
                             source={require('./resources/prof.png')} />
                  <Text style = {styles.drawerText} >
          My Profile
         </Text>
            </View>
            </TouchableOpacity>

        </ScrollView>

      </View>
    );
  }
}

Drawer.propTypes = {
  navigation: PropTypes.object
};

export default Drawer;