React Native：在行项目上按下切换按钮时重新渲染 FlatList

Question

尽管阅读了类似问题的文档和页面，但我似乎无法理解应该如何完成此任务。

我有一个项目列表，其中每个项目都可以单独显示，可以使用其名称在文本中进行紧凑查看，也可以使用图像进行完整查看。我有一个本地基本图标设置来切换显示选项。我知道它有效，因为如果我单击它并导航离开并再次导航回来，它会更新我的视图。

具有用于视图切换的道具和用于数据的道具的对象数组

data[{imgView: false, data:data}, {...}]

数据是静态的，唯一的变化是显示内容的过滤器。我试过使用 extraData 道具，但我无法让它正常工作。如果我将它与状态属性一起使用，它会出错，因为我需要执行 setState 的地方是在渲染函数中，这显然是行不通的。我尝试创建一个全局变量来引用，但它什么也没做。我不知道如何在我的行项目中引用道具来使用它。

我尝试使用 componentWillReceiveProps，但我不知道如何在我的数据对象中引用 props，而且它似乎无法在没有检查到位的情况下仅使用 setState 调用进行测试。

我想做的是：
按下行项目中的按钮 -> 仅切换该行项目的视图属性
切换行项目属性 -> 触发列表的重新呈现

编辑：添加一些代码片段

constructor(props) {
  super(props);
  this.state = {
    data: result,
    update: false
  };
};

_renderItem = ({item}) => {
  return (
    <Image source={item.imgView ? 
      images[item.data.imgFull] : 
      images[item.data.name]} 
      style={{flex:1}}
    />
    <Icon name="arrow-dropdown" 
      style={{color:'black'}}
      onPress ={() => {item.imgView = !item.imgView}}
    />
  );
);

render() {
  return (
    <FlatList
      data={this.state.data}
      extraData={this.state.update}
      keyExtractor={(item, index) => index} //to remove warning for now
      renderItem={this._renderItem}
    />
  );
};

我不知道我是否处理得当，但是当 _renderItem 函数的图标组件中的 onPress 被调用时，我想切换 state.update 以便 extraData 强制重新渲染。

Answer 1

由于数据是静态的，我不会将其存储在状态中。我会将 "item" 移到它自己的组件中，并使用该组件的状态来指示它是否打开。

export default class ListItem extends Component {
  constructor() {
    this.state = {
      open: false,
    }
  }

  toggleView = () => {
    const { open } = this.state;
    this.setState(() => ({ open: !open });
  }

  render() {
    const { item } = this.props;
    const { open } = this.state;

    return (
      <Image source={open ? 
        images[item.data.imgFull] : 
        images[item.data.name]} 
        style={{flex:1}}
      />
      <Icon name="arrow-dropdown" 
        style={{color:'black'}}
        onPress ={this.toggleView}
      />
    );
  }
}

 // In your current List component
_renderItem = ({item}) => <ListItem item={item} />;

React Native：在行项目上按下切换按钮时重新渲染 FlatList

React Native: Rerender FlatList when toggle button is pressed on a row item

reactjs

react-native