FlatList在按下item React Native时导航到新屏幕
FlatList在按下item React Native时导航到新屏幕
提问于 2019-07-04 13:17:59
我想当我按下扁平列表的每一项时，它需要导航到新的页面。例如，如果我按Devin，我需要导航到第1页，如果我按Jackson，它需要导航到第2页，依此类推
我不知道如何实现这一点，我已经尝试了以下代码，但此代码不工作，它显示错误无法找到变量键
if(key == 'Devin)
{
// Navigate to new page
}我的Home.js文件如下
import React, { Component } from 'react';
import { View, Text ,TouchableOpacity,StyleSheet,FlatList,item}
from 'react-native';
export class Home extends Component {
onclick_item()
{
if(key == 'Devin')
{
// navigate to Devin page
}
else if(key == 'Jackson')
{
// navigate to page 2
}
else if(key == 'james')
{
// navigate to page 3
}
}
render() {
return (
<View>
<FlatList
data={[
{key: 'Devin'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) => <TouchableOpacity onPress={() => this.onclick_item()}><Text>{item.key}</Text></TouchableOpacity>}
</FlatList>
</View>
)
}
}
export default HomeStack Overflow用户
发布于 2019-07-04 15:11:15
假设您将显示相同类型的数据，则不应为每个项目创建一个页面。只需构建一个页面并显示您从props获得的数据。例如：
<View>
<Text>{item.name}</Text>
<Text>{item.surname}</Text>
<Text>{item.number} </Text>
</View>并且您应该将数据作为
onclick_item(item) {
navigate("YourScreenKey",{item})
}如果你还没有选择的话，我建议你使用React导航。这里有一个教程链接，详细介绍了如何发送数据以及如何获取这些数据https://reactnavigation.org/docs/en/params.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56881080
复制相关文章
相似问题
腾讯云开发者
