当按下FlatList项时移动到另一个屏幕,可以通过使用导航库(如React Navigation)来实现页面之间的导航。在pressHandler()函数中,您可以通过获取选定项的键值,并将其传递给导航库的导航函数来导航到另一个屏幕。
以下是一个示例代码:
import React from 'react';
import { View, FlatList, TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const data = [
{ id: 1, title: 'Item 1' },
{ id: 2, title: 'Item 2' },
{ id: 3, title: 'Item 3' },
];
const MyScreen = () => {
const navigation = useNavigation();
const pressHandler = (itemId) => {
console.log('Pressed item ID:', itemId);
// 导航到另一个屏幕
navigation.navigate('AnotherScreen', { itemId });
};
const renderItem = ({ item }) => (
<TouchableOpacity onPress={() => pressHandler(item.id)}>
<Text>{item.title}</Text>
</TouchableOpacity>
);
return (
<View>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
</View>
);
};
export default MyScreen;
在上述代码中,我们使用了React Native的FlatList组件来渲染一个列表。每个列表项都是一个TouchableOpacity组件,当按下时会调用pressHandler()函数,并将选定项的id作为参数传递给它。在pressHandler()函数中,我们打印出选定项的id,并使用导航函数navigation.navigate()导航到名为"AnotherScreen"的另一个屏幕,并将选定项的id作为参数传递给该屏幕。
请注意,这只是一个示例代码,您需要根据您的具体项目和导航库进行适当的调整。
领取专属 10元无门槛券
手把手带您无忧上云