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

Question

我在处理平面列表中的项目时遇到了一些问题。我目前在按下列表项时收到错误 无法读取未定义的属性（读取 '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.

Answer 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}
    />
  )
}

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

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

React Native: pass onPress from renderItem to flatlist component

react-native

react-native-flatlist