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

Question

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

这是我的代码。

<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

Answer 1

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

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

将遍历地图的所有元素并显示它们各自的视频。您需要的是创建一个状态变量之类的东西，它只包含地图中一个视频的信息，并将其信息传递给

Answer 2

您可以通过以下方式简单地完成此操作

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)}
              />

我希望这会有所帮助 you.Happy 编码 :D

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

How to prevent map() from render whole array at once in react-native

javascript

arrays

function

react-native

react-native-video