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

Question

Hi folks I'm using viewPager and inside viewpager I'm rendering the array of videos using map. But I wan to show 1 video at one time as I'm giving height and width 100%. But when I run the app the all videos start playing.Only one show on the screen and the sound of other videos playing too. I want to prevent that. How can I do that?

Here is my code.

<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

The problem is the way you are using the map.

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

will iterate through all the elements of the map and display their respective videos. What you need is to create something like a state variable that will have the info for just one video from the map and just pass its info to the < Video /> component. You will need to have other react components like a button to move to another element of the map to play another video. Every time you click in this "button" you will execute some code to get another element of the map and play the respective video.

Answer 2

You can simply do this in the following way

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

I hope this will help you.Happy Coding :D