如何使视频适合 React Native 中的视图？答案

【问题标题】：How to make the video fit in view in React Native?如何使视频适合 React Native 中的视图？
【发布时间】：2019-01-29 05:40:25
【问题描述】：

我正在使用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。请帮助我，从昨天开始我就一直坚持下去。

【问题讨论】：

标签： react-native react-native-camera react-native-video

【解决方案1】：

您可以尝试以下设置：给视频一个相对于其父视图的高度可能会有所帮助。

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

我为图像视图做了同样的设置。我在缩放徽标时遇到问题，所以我这样做了。希望对您有所帮助。

编辑： 因为我还不能回复 cmets。查看这篇关于使用带有 React Native 的视频的详细文章。它有非常详细的信息。 https://medium.com/quick-code/react-native-video-component-68262bcbc21f

【讨论】：

它给了我一个警告，我不能在videoStyle 中使用resizeMode。
添加 resizeMode 作为视频道具，就像你做的那样。