首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当按下FlatList项时移动到另一个屏幕,现在我在pressHandler()中打印键值。

当按下FlatList项时移动到另一个屏幕,可以通过使用导航库(如React Navigation)来实现页面之间的导航。在pressHandler()函数中,您可以通过获取选定项的键值,并将其传递给导航库的导航函数来导航到另一个屏幕。

以下是一个示例代码:

代码语言:txt
复制
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作为参数传递给该屏幕。

请注意,这只是一个示例代码,您需要根据您的具体项目和导航库进行适当的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券