Как перейти на другой экран с экрана, открытого ящиком в экспо

Question

Я думаю, что я правильно сделал код, но когда я нажимаю на одну из возможностей touchableopacity, ничего не происходит, когда он открывается, хотя он не связан с выдвижным ящиком, он работает нормально, но в тот момент, когда он связан с выдвижным ящиком, touchableopacity не будет работа

это мое приложение. js код:

const Navigator = createStackNavigator({
  Home:{screen: Home},
  mp:{screen: mp},
  ch:{screen: ch},
  map:{screen:map},
  mn:{screen: mn},
  rr:{screen: rr},
  drawer:{screen: drawer,navigationOptions: { header: null }},



});


const App = createAppContainer(Navigator);
export default App;

код моего ящика:

const Header =({name, openDrawer})=> (
  <View style={styles.header}>
    <TouchableOpacity onPress={()=>openDrawer()}>
      <Ionicons name="ios-menu" size={32} />
    </TouchableOpacity>
    <Text>{name}</Text>
    <Text style={{width:50}}></Text>
  </View>
)


const Profile = ({navigation}) => (
  <View style={styles.container}>
    <Header name="Profile" openDrawer={navigation.openDrawer}/>
    <Image source ={require("../assets/img.png")} style={{width:"80%", height:"30%"}} resizeMode="contain"/>
    <Text style={{padding:20}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet dictum sapien, nec viverra orci. Morbi sed maximus purus. Phasellus quis justo mi. Nunc ut tellus lectus. 
    </Text>
    <Text style={{padding:20}}>
    In eleifend, turpis sit amet suscipit tincidunt, felis ex tempor tellus, at commodo nunc massa rhoncus dui. Vestibulum at malesuada elit.
    </Text>
  </View>
)

const Settings = ({navigation}) => (
  <View style={styles.container}>
    <Header name="Settings" openDrawer={navigation.openDrawer}/>
    <Image source ={require("../assets/img.png")} style={{width:"80%", height:"30%"}} resizeMode="contain"/>
    <Text style={{padding:20}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet dictum sapien, nec viverra orci. Morbi sed maximus purus. Phasellus quis justo mi. Nunc ut tellus lectus. 
    </Text>
    <Text style={{padding:20}}>
    In eleifend, turpis sit amet suscipit tincidunt, felis ex tempor tellus, at commodo nunc massa rhoncus dui. Vestibulum at malesuada elit.
    </Text>
  </View>
)

function Item({ item, navigate }) {
  return (
    <TouchableOpacity style={styles.listItem} onPress={()=>navigate(item.name)}>
      <Ionicons name={item.icon} size={32} />
      <Text style={styles.title}>{item.name}</Text>
    </TouchableOpacity>
  );
}

class Sidebar extends React.Component {
  state = {
      routes:[
          {
              name:"Home",
              icon:"ios-home"
          },
          {
              name:"Profile",
              icon:"ios-contact"
          },
          {
              name:"Settings",
              icon:"ios-settings"
          },
      ]
  }


  render(){
      return (
          <View style={styles.container}>
              <Image source={require("../assets/img.png")} style={styles.profileImg}/>
              <Text style={{fontWeight:"bold",fontSize:16,marginTop:10}}>Janna Doe</Text>
              <Text style={{color:"gray",marginBottom:10}}>janna@doe.com</Text>
              <View style={styles.sidebarDivider}></View>
              <FlatList
                  style={{width:"100%",marginLeft:30}}
                  data={this.state.routes}
                  renderItem={({ item }) => <Item  item={item} navigate={this.props.navigation.navigate}/>}
                  keyExtractor={item => item.name}
              />
          </View>
      )
  }
}

const Drawer = createDrawerNavigator(
  {
    Home:{ screen: menu},
    Profile:{ screen: Profile},
    Settings:{ screen: Settings}

  },
  {
    initialRouteName: "Home",
    unmountInactiveRoutes: true,
    headerMode: "none",
    contentComponent: props => <Sidebar {...props} />
  }
)

const AppNavigator = createStackNavigator(
  {
    Drawer : {screen: Drawer},
  },
  {
    initialRouteName: "Drawer",
    headerMode: "none",
    unmountInactiveRoutes: true
  }
)

const AppContainer = createAppContainer(AppNavigator);



export default class drawer extends React.Component {
  render(){

    return (
      <AppContainer />
    );
  }

}

и код страницы, который открывается я не могу перемещаться при использовании touchableopacity:

export default class Screen1 extends React.Component {


  render() {
    const {navigate} = this.props.navigation;
    const Header =({name, openDrawer})=> (
      <View style={styles.header}>
        <TouchableOpacity onPress={()=>openDrawer()}>
          <Ionicons name="ios-menu" size={32} />
        </TouchableOpacity>
        <Text>{name}</Text>
        <Text style={{width:50}}></Text>
      </View>
    )
    return (
      <ImageBackground source={bgimg} style={styles.bg}>
      <Header name="Home" openDrawer={this.props.navigation.openDrawer}/>

       <View style={{ alignItems:'center',height:230,}}>

       <Image source={img} style={{width:'100%',height:'100%'}} />
       </View>

       <ScrollView style={styles.scrollView}>

          <View style={{flexDirection:'row'}}> 
       <View style={{width:'33%'}}>

       <TouchableOpacity onPress={() => navigate('map')} >
          <Image source={i1} style={styles.i} />
          </TouchableOpacity> 


       <TouchableOpacity onPress={() => navigate('map')} >
          <Image source={i2} style={styles.i} />
          </TouchableOpacity>


       <TouchableOpacity onPress={() => navigate('map')} >
          <Image source={i3} style={styles.i} />
          </TouchableOpacity>




       <TouchableOpacity onPress={() => navigate('map')} >
          <Image source={i4} style={styles.i} />
          </TouchableOpacity>


       <TouchableOpacity onPress={() => navigate('map')} >
          <Image source={i5} style={styles.i} />
          </TouchableOpacity> 


       <TouchableOpacity onPress={() => navigate('map')} >
          <Image source={i6} style={styles.i} />
          </TouchableOpacity> 


       <TouchableOpacity onPress={() => navigate('map')} >
          <Image source={i7} style={styles.i} />
          </TouchableOpacity></View> 

          </View>
          </ScrollView>

      </ImageBackground>
    );
  }
}