Expo / React Native: видео не может изменить размер - PullRequest
Новая
       29

Expo / React Native: видео не может изменить размер

0 голосов
/ 27 ноября 2018

Я использую Expo с React Native, тестирую на симуляторе Android на Galaxy S8 +.

Я использую компонент Video из библиотеки Expo, так как не смог получить react-native-video для работы.

Я использую следующий код: <Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />

styles.video это просто {width: window.width, height: 650}

, который отображает следующее: Снимок экранао выпуске

Но, если вы загрузите видео, оно на самом деле умещается во все окно и имеет размеры, как я хочу, но только на полсекунды.После этого он сразу становится маленьким, как на скриншоте.Я также пробовал cover и center, и это не сработало.Буду признателен за любую помощь.

Редактировать: Подробнее:

Я хочу, чтобы это выглядело примерно так, что я работаю для изображений: Изображение того, как оно должно выглядеть

С изображениями я использую стандартный компонент Image из React Native следующим образом: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />

И styles.images идентичен styles.video на данный момент.

1 Ответ

0 голосов
/ 27 ноября 2018

В зависимости от вашего экрана ваш интерфейс может быть сконструирован следующим образом. 

return(
   <View style={{ width: "100%",height: "100%", flex: 1}}>
      <View style={{flex:0.7,justifyContent:'center'}}>
          <Video
           source={{ uri: url }}
           isMuted={false} 
           shouldPlay
           isLooping
           usePoster={true} 
           useNativeControls={false}
           />
       </View>
      <View style={{flex:0.1}}/>
      <TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
           <View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
            <Text>Next</Text>
           </View>
      </TouchableOpacity>
   </View>
 )

Не забудьте импортировать TouchableOpacity!

Надеюсь, я смогу вам помочь.Прокомментируйте, если вам нужна дополнительная помощь.

...