Как сделать видео вписывающимся в React Native?

Question

Я использую react-native-video

<View style={styles.videoView}>
     <Video 
         source={{ uri: strings.sourceUri+"posts/"+this.state.videoSrc }} 
         ref={(ref) => { this.player = ref }}           
         repeat={true}
         resizeMode="contain"                    
         style={styles.videoStyle}
     />
</View>

Стили

videoView: {
  justifyContent:'center', 
  alignItems: 'center', 
  flex: 1,
  flexDirection: 'column',
},
videoStyle: {
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
},

Итак, я получаю видео с API. И я хочу показать это в моем плоском списке. Но видео либо становится маленьким, если я использую resizeMode="contain" или размер становится больше, если я использовал resizeMode="cover", Может кто-нибудь, пожалуйста, скажите мне, как я могу сделать масштабирование моего видео, чтобы оно вписывалось в вид.

я использую react-native-camera, Пожалуйста, помогите мне, я застрял на нем со вчерашнего дня.

Answer 1

Вы можете попробовать следующую настройку: может помочь предоставление видео высоты относительно родительского вида.

videoView: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
},
videoStyle: {
    alignSelf: 'center',
    height: '80%',
    resizeMode: 'contain'
    },

Я сделал ту же настройку для просмотра изображений. У меня были проблемы с масштабированием логотипа, поэтому я сделал это. Надеюсь, поможет.

РЕДАКТИРОВАТЬ: так как я не могу ответить на комментарии еще. Проверьте эту подробную статью об использовании видео с реагировать родной. Это очень подробная информация. https://medium.com/quick-code/react-native-video-component-68262bcbc21f