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 Home回答 3
Stack Overflow用户
回答已采纳
发布于 2019-07-04 13:29:25
如果你使用switch case而不是if if会更好，而且你需要在组件和函数之间传递密钥。
import React, { Component } from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
FlatList,
item
} from "react-native";
export class Home extends Component {
onclick_item(key) {
switch (key) {
case "Devin":
//navigate
break;
case "Jackson":
//navigate
break;
default:
//whatever you want
}
}
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={item => this.onclick_item(item.key)}>
<Text>{item.key}</Text>
</TouchableOpacity>
)}
/>
</View>
);
}
}
export default Home;Stack Overflow用户
发布于 2019-07-04 13:27:58
您忘记将变量传递给render方法。
尝试以下操作：
import React, { Component } from 'react';
import { View, Text ,TouchableOpacity,StyleSheet,FlatList,item}
from 'react-native';
export class Home extends Component {
onclick_item(item) {
let key = item.key
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(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
复制相关文章
相似问题
腾讯云开发者
