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

eoxn13cs 于 2023-10-22 发布在 React

关注(0)|答案(1)|浏览(134)

使用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

来源：https://stackoverflow.com/questions/54414495/how-to-make-the-video-fit-in-view-in-react-native

1条答案

按热度按时间

kuarbcqp1#

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

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

赞(0）回复(0）举报 2023-10-22

我来回答

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

1条答案

相关问题

热门标签

最新问答