react-native数组堆栈的imageviews-如何仅对最顶层的项目进行动画处理？

Question

本质上，我想构建像火种左右滑动功能一样的东西。

我在一个数组中有10个Imageview堆栈。单击按钮时，我想使索引为9的最高图像视图向左移动，并使用拼接将索引9推回数组中。

我不确定这种行为的最佳方法是本机反应。我到目前为止所做的：

constructor(props) {
    super(props);

    this.state = {
        images: [],
    };
}

然后我以异步方式获取imageviews并将其添加到状态中，该属性应为shouldAnimate = false：

json.images.map((e,key) => {
    img.push(<Images key={e.id} shouldAnimate={false} uri={e.src} />);
  });

然后在我的按钮单击功能中，尝试将propanianimate更改为true，以使imageview动画化。

编辑：

let newArr = this.state.images.map((elem, idx) => {);
  if(idx === 9) {
    //update should animate
    elem.props.shouldAnimate = true;
  }
  return elem;
})
console.log(newArr);

但是，使用调试器，我可以看到shouldAnimate实际上从未设置为true。

我想我在这里真的很胖...对不起。另外，我真的不确定将图像视图存储在商店中是否是一个好主意。

非常感谢您的帮助！ 谢谢

Answer 1

我认为您的问题是map函数的工作方式。 map永远不会更改实际数组，您需要将其分配给新数组：

     let newArray = imgArr.map((elem, idx) => {
      if(idx === 9) {
        //update should animate
        elem.props.shouldAnimate = true;
      }
      return images;
    })
    console.log(newArray)

新数组将具有具有真实值的道具。

Answer 2

@Oma-感谢您的帮助！我能够解决它-该链接非常有帮助：）

我所做工作的快速概览：

我从异步抓取中获取图像信息并存储

json.images.map((e,id) => {
  img.push({
    key: id,
    shouldAnimate: this.state.shouldAnimArr[id].shouldAnimate,
    uri: e.src
  })
});
this.setState({
  imageViews: img,
  isLoading: false
})

当我单击“赞”按钮复制状态数组时，将一个元素上的shouldAnimate更改为true并使用新数组设置状态。

likeImage() {
  let imgArrShouldAnimate = this.state.shouldAnimArr.slice();
  let newArr2 = imgArrShouldAnimate.map((elem, idx) => {
    if(idx === 9) {
      elem.shouldAnimate = true;
    }
    return elem;
  })
  this.setState({
    imgArrShouldAnimate: newArr2
  });
}

我使用以下方式渲染图像：

{this.state.imageViews.map(e => {
  return (
    <Images key={e.key} shouldAnimate={this.state.shouldAnimArr[e.key].shouldAnimate} uri={e.uri} />
  )
})}