如何使视频适合 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'
    },

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

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