如何防止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