react native - onPress 获取 Flatlist 详细信息

Question

我正在使用来自 react native elements 的 react native 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，并将 item 作为道具。在这个新组件中，您可以使用name、title 或任何其他属性。