React Native中如何给map循环渲染的组件添加显隐切换功能

你可以通过状态控制渲染的数组长度来实现需求，具体步骤如下：

步骤1：新增状态控制展开/收起 #

在组件内定义布尔类型的状态，初始值为false代表默认收起，仅展示2条数据：

import { useState } from 'react';

// 组件内部代码
const [showAll, setShowAll] = useState(false);

步骤2：给Toggle按钮绑定点击事件 #

修改TouchableOpacity组件，点击时切换showAll的状态，同时可以动态修改按钮文本提升用户体验：

<TouchableOpacity onPress={() => setShowAll(prev => !prev)}>
    <Text>{showAll ? '收起' : 'Toggle'}</Text>
</TouchableOpacity>

步骤3：修改渲染逻辑，按需截取数组 #

渲染前根据showAll状态判断要渲染的数组范围，收起时截取数组前2项，展开时使用全量数组：

{
  (showAll ? upcoming : upcoming.slice(0, 2))
  .map((item, index) => (
    <UpComingComponent
        key={item.name} // map循环必须绑定唯一key，若存在name重复的场景可替换为后端返回的唯一标识字段
        name={item.name}
    />
  ))
}

可选优化 #

如果接口返回的数组总长度本身小于等于2，不需要展示Toggle按钮，可以额外加一层判断：

{upcoming.length > 2 && (
  <TouchableOpacity onPress={() => setShowAll(prev => !prev)}>
      <Text>{showAll ? '收起' : 'Toggle'}</Text>
  </TouchableOpacity>
)}

内容的提问来源于stack exchange，提问作者pratteek shaurya