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

如何在React Native中使视频适合观看？

1 个答案: