如何仅展开平面列表中的一项

Question

我是react-native的初学者，我正在使用Flatlist呈现水果列表，列表呈现正确，问题是当我单击以从列表中展开一个项目时，所有其他项目都随着好。我制作了一个gif，以显示当前行为，并将代码放在小点心中，以方便理解。

Code on Snack

您能告诉我如何打开我单击的项目吗？

还有如何使我的Flatlist的第一项始终默认展开？

谢谢。

Answer 1

对于所有列表项，您的布尔值true为true，因此它将不起作用。显然，您的expanded必须是一个唯一值，即fruit_name（ NOT INDEX！），然后比较该值。

onChangeLayout = (fruitName) => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded: fruitName });
    this.componentDidMount();
  };

...

onPress={() => this.onChangeLayout(item.fruit_name)}

...

height: (this.state.expanded === item.fruit_name) ? null : 0,

在请求将第一个项目扩展为初始项目时，应在获取成功范围块中执行以下操作

.then(responseJson => {
  const dataSource = responseJson['data'];
  this.setState({
    fruitLIst: true,
    dataSource,
    expanded: (dataSource && !!dataSource.length) ? dataSource[0].fruit_name : null
 })