Question

我是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>

{p> 1中的

renderItem：

FlatList

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

Answer 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;

在主屏幕中使用stacknavigator响应本机，抽屉

1 个答案: