如何防止 map() 在 react-native 中一次渲染整个数组

Posted 2023-03-15

【中文标题】如何防止 map() 在 react-native 中一次渲染整个数组

【英文标题】：How to prevent map() from render whole array at once in react-native

【发布时间】：2020-09-07 04:31:52

【问题描述】：

大家好，我正在使用viewPager，在 viewpager 中，我正在使用地图渲染视频数组。但是我想一次显示 1 个视频，因为我将高度和宽度设为 100%。但是当我运行该应用程序时，所有视频都开始播放。屏幕上只显示一个，其他视频的声音也在播放。我想阻止这种情况。我该怎么做？

这是我的代码。

<ViewPager
        onPageSelected=(e) => 
          setActive(e.nativeEvent.position);
          // setPaused(true);
        
        orientation="vertical"
        style=height: '100%'
        initialPage=0>
        vids.map((item,index) => 
          return (
            <View key=index>
              <Video
               paused=item.paused
                source=uri: item.vid
                style=styles.mediaPlayer
                volume=0.5
                resizeMode="cover"
                repeat=true
                
                onReadyForDisplay=() => SetVideoLoad(false)
              /></ViewPager

【参考方案1】：

您可以通过以下方式简单地做到这一点

const [pause,setPause]= useState(true)

               <Video
               paused=pause
                source=uri: item.vid
                style=styles.mediaPlayer
                volume=0.5
                resizeMode="cover"
                repeat=true
                onTouchStart=()=>setPause(!pause) //<=== Add this line
                onReadyForDisplay=() => SetVideoLoad(false)
              />

我希望这会对你有所帮助。快乐编码：D

【参考方案2】：

问题在于您使用地图的方式。

vids.map((item,index) => 
      return (
        <View key=index>
                    ....
         <View /> ) ..

将遍历地图的所有元素并显示它们各自的视频。您需要创建一个状态变量之类的东西，该变量将仅包含地图中一个视频的信息，并将其信息传递给 组件。您将需要其他反应组件（例如按钮）移动到地图的另一个元素以播放另一个视频。每次单击此“按钮”时，您都会执行一些代码来获取地图的另一个元素并播放相应的视频。