如何在反应原生渲染中以无限循环返回数组项视图？

Posted 2023-02-21

【中文标题】如何在反应原生渲染中以无限循环返回数组项视图？

【英文标题】：How to return array item views in an infinity loop in react native render?

【发布时间】：2020-01-18 12:43:58

【问题描述】：

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

注意：我会将我的渲染方法的一些代码 sn-p 粘贴到我的 react native jsx 文件中。 欢迎任何cmets。

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();

【问题讨论】：

看起来您想要循环播放动画。 facebook.github.io/react-native/docs/animated#loop

【参考方案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>

【参考方案2】：

像这样修改i 不会对下一次迭代产生任何影响，因为它是传递给map 的函数中的一个参数。如果你想像这样操作i，你应该使用在循环体范围之外定义i的循环。

类似

let i = 0;
while (i < this.state.list.length) 
  if (something) 
    i++;
   else 
    i = 0;
  

要准确理解您要完成的工作有点困难，但希望这有助于消除一些困惑。

【讨论】：

这个逻辑是正确的。但问题是用这个迭代返回我的数组。在地图函数中，我可以将其返回为“return myArray.map();”。使用这个 while 和 for 循环时我能做什么？

您可以推送到您在循环外定义的数组，然后返回该数组

没什么好推的。您能否检查我的示例并使用数组的返回视图编辑您的答案。这将是一个很大的帮助。在循环内返回数组不是我想要的。