React Native，在主屏幕中带有 stacknavigator 的 Drawer答案

【问题标题】：React Native, Drawer with stacknavigator in homescreenReact Native，在主屏幕中带有 stacknavigator 的 Drawer
【发布时间】：2019-09-23 15:06:18
【问题描述】：

我是 React Native 的新手，我无法让堆栈导航器与 Drawer 一起工作，基本上我的 App.js 为屏幕创建了 Drawer，首先是 HOME 和 ABOUT，所以正在加载 HOME，其次在 HOME 我有一个 FlatList，从该列表中，我希望当按下 Flatlist 的一行时，它会打开一个 Stacknavigation 以显示更多信息，但是当我设置 onPress={() = > this.props.navigation.navigate('',{ departement: item.PRA_Departement}) 时它不会打开页面。我搞砸了 Stacknavigator 吗？

render() 的返回：

return (
  <Root>
  <Container style={{marginTop: 20}}>
  <StatusBar translucent={false} />
  <Header>
    <Left>
      <Button onPress={() => this.props.navigation.openDrawer()} transparent>
        <Icon name='menu' />
      </Button>
    </Left>
    <Body>
      <Title>Accueil</Title>
    </Body>
  </Header>
  <Header searchBar rounded>
  <Item>
        <Icon name="search" />
        <Input onSubmitEditing={text => this.handleSearch(text)} placeholder="Rechercher ..." />
  </Item>
  </Header>
  <Content>
  <FlatList 
      data={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={item => item.PRA_NUM}
      onEndReached={()=> Toast.show({
        text: 'Chargement terminé !',
        type: "success",
        textStyle: {marginHorizontal:100}
      })}
    />
  </Content>
</Container>
</Root>

来自FlatList的renderItem：

  renderItem = ({ item }) => {
    return (

      <TouchableWithoutFeedback onPress={() => this.onPressItem(item)}>
          <ListItem>
              <Text>{item.PRA_Departement==null ? "Code Postal: " + item.PRA_CP:item.PRA_Departement}</Text>
          </ListItem>
      </TouchableWithoutFeedback>

    )
  }

onPressItem(item) {
  () => this.props.navigation.push('DisplayPraticien',{departement: item.PRA_Departement})
}

onPress 应该打开 DisplayPraticien 吗？我已经尝试过导航

【问题讨论】：

标签： android react-native react-native-flatlist native-base

【解决方案1】：

请尝试以下方法

import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
} from "react-navigation";
...
...

const DrawerNavigation = createDrawerNavigator(
  {
    Home: { screen: Home },
    About: { screen: About },
    //Other screens in drawer...
  },
  {
    initialRouteName: "Home",
    contentComponent: Menu,
    drawerWidth: Dimensions.get("window").width - 100
  }
);

const DrawerStack = createStackNavigator(
  {
    DrawerNavigation: { screen: DrawerNavigation },
    DisplayPraticien: { screen: DisplayPraticien },
    //Other classes for stack...
  },
  { headerMode: "none" }
);

const App = createAppContainer(DrawerStack);

export default App;

【讨论】：