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

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

您好，我正在使用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

解决方法

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

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

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

,

您可以简单地通过以下方式进行操作

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