javascript - React Native - 如何在 onPress 一项时隐藏数组中的其他项目？

Question

我在我的 View 中显示了一组项目(Circle 组件)，

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

这是我的 RN 代码..有什么想法吗？

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: () => {}
};

(请忽略一些变量名是电视剧相关的，而照片是食物相关的，还没来得及修复)。

仅供引用，映射 Circle 组件数组的父组件如下所示:

class Favorites extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      circleCount: 0
    };
    this.addCircle = this.addCircle.bind(this);
  }
  componentDidMount() {
    for(let i = 0; i < this.props.screenProps.appstate.length; i++) {
      setTimeout(() => {
        this.addCircle();
      }, (i*100));
    }
  }
  addCircle = () => {
    this.setState((prevState) => ({circleCount: prevState.circleCount + 1}));
  }

  render() {
    var favoritesList = this.props.screenProps.appstate;

    var circles = [];
    for (let i = 0; i < this.state.circleCount; i++) {

      circles.push(
          <Circle key={favoritesList[i].url} style={styles.testcontainer} data={favoritesList[i]}>

          </Circle>
      );
    }

    return (
        <ScrollView style={{backgroundColor: '#fff9f9'}}>
          <View style={styles.favoritesMainView}>
            <View style={styles.circleContainer}>
              {circles}
            </View>
          </View>
        </ScrollView>
    );
  }
}

Answer 1

在我的脑海中(如果我理解你想要的)可能没有什么解决方案。

您可能需要跟踪“选定的”圆并根据它设置组件的样式。例如，如果您仍然需要元素的高度，您可以使用 {height: 0} 或 {opacity: 0} 为未选择的元素设置样式。

要跟踪我会尝试以下方法:

在收藏状态:

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

并传递 3 个新值给 circle，第三个是改变“selected”状态的函数:

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

在 Circle 中，我们使用传递的方法将按下的索引传递回收藏夹:

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

在 Circle 的 render 方法中，我们创建了一个不透明度样式来隐藏任何当前未被选中的元素(但只有当有一个被选中时 - 这意味着如果它是 -1 则没有被选中并且不应该对任何 Circle 应用不透明度:

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

最后一步是应用样式(空对象或不透明度:0):

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

我不确定您要关闭或缩小的位置。就在您关闭或缩小圆圈时，您只需调用 this.props.onClick(-1) 即可有效地取消选择圆圈。这意味着不会有其他圈子应用不透明度。

---

您可能需要做的一件事是更改收藏夹中的 setState() 方法，以确保“已选择”未被删除:

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

在此版本中，我们仅更改 circleCount 并保留 prevState 具有的任何其他属性 - 在这种情况下，“selected”保持不变。