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

Question

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

Answer 1

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

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

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

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

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