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

Posted 2023-03-11

【中文标题】如何使视频适合 React Native 中的视图？

【英文标题】：How to make the video fit in view in 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。请帮助我，从昨天开始我就一直坚持下去。

【参考方案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 作为视频道具，就像你做的那样。