Блог

Привет, ребята, я использую viewPager и внутри viewpager я визуализирую массив видео с помощью map. Но я хочу показывать 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
  

Вы можете просто сделать это следующим образом

 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

Проблема в том, как вы используете карту.

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

будет выполнять итерацию по всем элементам карты и отображать их соответствующие видео. Что вам нужно, так это создать что-то вроде переменной состояния, которая будет содержать информацию только для одного видео с карты и просто передавать ее информацию компоненту < Video />. Вам понадобятся другие компоненты react, такие как кнопка, для перехода к другому элементу карты для воспроизведения другого видео. Каждый раз, когда вы нажимаете на эту «кнопку», вы будете выполнять некоторый код, чтобы получить другой элемент карты и воспроизвести соответствующее видео.