реагировать родной - на пресс получить плоский список подробная информация

Question

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

Так, например, если я нажму на AmyFarha, я хочу получить к ней доступ email и phoneNumber на новом экране.

Ниже приведен код. Я добавил адрес электронной почты и номер телефона.

import { List, ListItem } from 'react-native-elements'

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President',
    email: 'amy@amy.com',
    phoneNumber: '1-808-9999'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman',
    email: 'chris@chris.com',
    phoneNumber: '1-808-8888'
  },
  ... // more items
]

<List containerStyle={{marginBottom: 20}}>
  {
    list.map((l) => (
      <ListItem
        roundAvatar
        avatar={{uri:l.avatar_url}}
        key={l.name}
        title={l.name}
      />
    ))
  }
</List>

Answer 1

В элементе списка компонентов используйте раскрытие, чтобы показать детали пользователя, например:

handleExpand = () => {
    this.setState({expand: !this.state.expand})
}

<TouchableOpacity onPress={this.handleExpand}>
   {this.state.expand ? (<ViewExpand/>) : (<ViewNormal/>)}
</TouchableOpacity>

Answer 2

handleTouchItem = (item) => {
    this.props.navigation.navigate("forward page do you want", item);
}
 <ListItem
        onPress={() => this.handleTouchItem(item)}
        roundAvatar
        avatar={{uri:l.avatar_url}}
        key={l.name}
        title={l.name}
      />

Answer 3

Вы должны использовать что-то вроде этого:

 <View>
              <FlatList
                  data={list}
                  keyExtractor={this._keyExtractor}
                  renderItem={({ item }) => (
                      <CustomItemComponent item={item} onPress={this.props.onItemPress}/>
                  )}
                  numColumns={2}
                  />
</View>

И вы можете создать новый компонент CustomItemComponent с предметом в качестве опоры. В этом новом компоненте вы можете использовать name, title или любое другое свойство.