Javascript React Native-按下一项时如何隐藏数组中的其他项？

我正在视图中显示一组项目（

Circle

components），

但我不确定单击一个圆圈时如何隐藏所有其他圆圈（onPress设置为放大并提供有关我单击的圆圈的更多信息卡）。

这是我的注册号码。。有什么想法吗

class Circle extends Component {
  constructor(props) {
    super(props);
    this.state = { opened: false};
    this.onPress = this.onPress.bind(this);
  }

  onPress() {
    this.props.onPress();
    if (this.props.noAnimation) {
      return;
    }

    if (this.state.opened) {
      this.refs.nextEpisode.fadeOutLeft();
      this.refs.description.fadeOutDownBig();
      return  this.setState({opened: false, windowPos: null});
    }
    this.refs.container.measureInWindow((x, y) => {
      this.refs.nextEpisode.slideInLeft();
      setTimeout(() => this.refs.description.fadeInUpBig(), 400);
      this.setState({
        opened: true,
        windowPos: { x, y },
      });
    });
  }

  render() {
    const data = this.props.data;
    const { opened } = this.state;
    const styles2 = getStyles(opened, (this.props.index % 2 === 0));

    const containerPos = this.state.windowPos ? {
      top: - this.state.windowPos.y + 64
    } : {};

    return (
      <TouchableWithoutFeedback onPress={this.onPress}>
        <View style={[styles2.container, containerPos]} ref="container" >
          <TvShowImage tvShow={data} style={styles2.image} noShadow={opened} openStatus={opened}/>
          <View style={styles2.title}>
            <Title
              tvShow={data}
              onPress={this.onPress}
              noShadow={opened}
            />
            <Animatable.View
              style={styles2.animatableNextEpisode}
              duration={800}
              ref="nextEpisode"
            >
              <NextEpisode tvShow={data}/>
            </Animatable.View>
          </View>
          <Animatable.View
            style={styles2.description}
            duration={800}
            ref="description"
            delay={400}
          >
            <Text style={styles2.descriptionText}>{data.item_description}</Text>
          </Animatable.View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}
Circle.defaultProps = {
  index: 0,
  onPress: () => {}
};

在我脑海中（如果我理解你想要什么），可能没有什么解决方案

您可能需要跟踪“选定”圆，并根据该圆设置组件的样式。例如，如果仍然需要元素的高度，可以使用

{height:0}

或

{opacity:0}

对未选中的元素进行样式设置

要跟踪，我将尝试以下方法：

处于收藏夹状态：

this.state = {
  circleCount: 0,
  selected: -1
};

并将3个新值传递给circle，第三个是用于更改“选定”状态的函数：

在Circle的渲染方法中，我们创建一个不透明度样式来隐藏当前未选定的任何元素（但仅当有一个选定元素时，即如果该元素为-1，则不选择任何元素，并且不应将不透明度应用于任何圆）：

render() {
  const { selected, index } = this.props;
  let opacityStyle = {};
  if(selected !== -1) {
    if(selected !== index) {
      opacityStyle = { opacity: 0 }
    }
  }

最后一步是应用样式（空对象或不透明度：0）：

---

在此版本中，我们只更改circleCount并保留prevState具有的任何其他属性—在本例中为“已选择”保持不变。

如果您想使用动画，则无法将圆圈的其余部分从列表中删除。向圆圈添加isShown属性，当圆圈未显示时，将高度设置为0。弹出onPress事件，因此当按下一个圆圈时，将其余isShown设置为false。顺便说一句，如果圆圈没有关键道具，这将不起作用。嘿@adam_uu谢谢你的回复——读起来像一本书！真是太棒了。我把你的每一个步骤都按字母顺序抄了下来，实际上，也许有一个东西被翻过来了？因为我实际上看到的可能是相反的效果——当我点击列表视图中的一个项目时，那一个项目是唯一消失的东西（而不是缩小显示所有信息和关于它的额外组件），所有其他项目都保留下来。这与预期的效果相反哈哈。有什么想法吗？嘿！看起来像是将

if（selected==index）

更改为

if（selected！==index）

并在

if（selected！==index）

下插入

this.props.onClick（-1）；

（this.state.opened）{}循环组件的函数起作用了！这对你有意义吗？是的，看起来我在逻辑上犯了一个小错误。很好的理解！很高兴你从我的写作中得到了一些东西！

<Circle
  key={favoritesList[i].url}
  style={styles.testcontainer}
  data={favoritesList[i]}
  index={i}
  selected={this.state.selected}
  onClick={(index) => {
    this.setState(prevState => {
      return { ...prevState, selected: index }
    });
  }}
/>

onPress() {
  this.props.onClick(this.props.index);
  ...

render() {
  const { selected, index } = this.props;
  let opacityStyle = {};
  if(selected !== -1) {
    if(selected !== index) {
      opacityStyle = { opacity: 0 }
    }
  }

<TouchableWithoutFeedback onPress={this.onPress}>
    <View style={[styles2.container, containerPos, opacityStyle]} ref="container" >

addCircle = () => {
this.setState(prevState => {
    return { ...prevState, circleCount: prevState.circleCount + 1 };
  }
)}