React Native：将 onPress 从 renderItem 传递到 flatlist 组件答案

【问题标题】：React Native: pass onPress from renderItem to flatlist componentReact Native：将 onPress 从 renderItem 传递到 flatlist 组件
【发布时间】：2023-02-17 04:22:34
【问题描述】：

我在处理平面列表中某个项目的新闻时遇到了一些问题。我目前收到一个错误无法读取未定义的属性（读取“onPressListHandler”）按下列表项时。

这是我的屏幕代码：

const listRenderItem = ({ item }) => {
    return (
        <Pressable onPress={() => this.onPressListHandler(item.id)} >
            <Text _dark={{ color: "warmGray.50" }} color="coolGray.800">
                {item.listName}
            </Text>
            <Icon as={Ionicons} name="chevron-forward-outline" size="sm" />
        </Pressable>
    )
};

const ListsList = () => {
    // ...
    function onPressListHandler(id) {
        navigation.navigate('ListDetailScreen', { listId: id })
    }
    // Render
    return (
        <FlatList
            data={lists}
            renderItem={listRenderItem}
            keyExtractor={item => item.id}
        />
    );

function MainScreen({ navigation }) {
    // ...
    // Render
    return (
            <ListsList />
    );
}

export default MainScreen;

我怎样才能确保新闻发布会顺利通过并正常进行？ TIA。

【问题讨论】：

为什么不直接将函数放入 listRenderItem 组件中或将其作为 prop 传递？

标签： react-native react-native-flatlist

【解决方案1】：

有多种方法可以实现这一点，@yousoumar 有一个非常有效的方法。

其他一些：

将onPressListHandler 传递给组件。

const onPressListHandler = (id) => {};

const renderItem = ({ item }) => listRenderItem(item, onPressHandler);

return (
  <FlatList
    renderItem={renderItem}
  />
)

// 
const listRenderItem = (item, onPress) => {
  // Now you can call onPress(item.id);
}

将listRenderItem 放入您的ListsList 组件中。


const ListsList = () => {
  const onPressListHandler = (id) => {};

  const listRenderItem = ({ item }) => {
    // You can call `onPressListHandler(item.id)` here.
  }

  return (
    <FlatList
      renderItem={listRenderItem}
    />
  )
}

我个人在这里选择第二个选项，但我很想知道为什么你的渲染函数在你的组件之外。

【讨论】：

是的，我不知道为什么要那样做，对我来说最清楚的是将 listRenderItem 放在 ListsList 中，所以我现在已经这样做了，而且效果很好。

【解决方案2】：

你可以像下面那样做，例如，通过在listRenderItem 中处理重定向：

import { useNavigation } from '@react-navigation/native';

const listRenderItem = ({ item }) => {
    const {navigation} = useNavigation();
    return (
        <Pressable onPress={() =>  navigation.navigate('ListDetailScreen', { listId: item.id })} >
            <Text _dark={{ color: "warmGray.50" }} color="coolGray.800">
                {item.listName}
            </Text>
            <Icon as={Ionicons} name="chevron-forward-outline" size="sm" />
        </Pressable>
    )
};

const ListsList = () => {
    
    // Render
    return (
        <FlatList
            data={lists}
            renderItem={listRenderItem}
            keyExtractor={item => item.id}
        />
    );

function MainScreen({ navigation }) {
    // ...
    // Render
    return (
            <ListsList />
    );
}

export default MainScreen;

【讨论】：