时间戳

首页 > 解决方案 > 如何使视频适合 React Native 中的视图？

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

问题描述

我在用着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-nativereact-native-camerareact-native-video

解决方案

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

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

推荐阅读