React Native, Ящик со стекавигатором на рабочем столе - PullRequest
Новая
       32

React Native, Ящик со стекавигатором на рабочем столе

0 голосов
/ 06 мая 2019

Я новичок в 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>

renderItem из FlatList: 

  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?Я уже пробовал с навигацией

1 Ответ

0 голосов
/ 06 мая 2019

Пожалуйста, попробуйте следующее 

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