javascript - 如何在 react native 渲染中以无限循环返回数组项 View ？

Question

假设list.length是5。我需要在无限循环中返回下面的 View 。不是5个循环。我想一项一项地遍历数组。当到达索引4时，它应该再次指向索引0。这个过程应该递归执行。
在这里，它会在到达数组的最后一个索引后停止。当“i”到达数组的最后一个索引时，我尝试设置“i=0”，但无法访问。有没有办法用javascript实现这个场景。

注意:我将在我的 React Native jsx 文件中粘贴渲染方法的一些代码片段。欢迎任何评论。

return this.state.list
      .map((item, i) => {
        if (i === this.state.currentIndex) {
          return (
            <Animated.View
              {...this.panResponder.panHandlers}
              key={item.id}
              style={[
                this.rotateAndTranslate,
                { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: "absolute" }
              ]}
            >
              <Animated.View
                style={{
                  opacity: this.likeOpacity,
                  transform: [{ rotate: "-30deg" }],
                  position: "absolute",
                  top: 50,
                  left: 40,
                  zIndex: 1000
                }}
              >
              ....................more codes....................... 
              </Animated.View>

              <Image style={{ flex: 1, resizeMode: "contain", borderRadius: 20 }} source={{ uri: item.image }} />
            </Animated.View>
          );
        }else{
           return something;
        }

    }).reverse();

Answer 1

我认为您需要一个在 5 次点击后重新加载的功能组件..

// Get a hook function
const {useState, useEffect} = React;

const Example = ({title}) => {
  const [count, setCount] = useState(0);
  
  const [compCount, setCompCount] = useState(0);
  return (
    <div>
    {<GetComp value={compCount}/>}
      <button onClick={() => {
        setCount(count+1);
        if(count % 5 ==0 && count != 0){
          setCompCount(compCount + 5)
        }
      }}>
        Click me
      </button>
    </div>
  );
};

const GetComp = props => {
  return [1,2,3,4,5].map(e => <div> {e+props.value} </div>)
}

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>