[英]react native - onPress get Flatlist detailed information
我使用的反应本地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>
在组件列表项中使用 expand 显示用户详细信息,如下所示:
handleExpand = () => {
this.setState({expand: !this.state.expand})
}
<TouchableOpacity onPress={this.handleExpand}>
{this.state.expand ? (<ViewExpand/>) : (<ViewNormal/>)}
</TouchableOpacity>
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}
/>
你应该使用这样的东西:
<View>
<FlatList
data={list}
keyExtractor={this._keyExtractor}
renderItem={({ item }) => (
<CustomItemComponent item={item} onPress={this.props.onItemPress}/>
)}
numColumns={2}
/>
</View>
你可以创建一个新的组件CustomItemComponent
以 item 作为道具。 在这个新组件中,您可以使用name
、 title
或任何其他属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.