android - 如何在不改变宽高比的情况下调整视频大小？

Question

  constructor(props) {
    super(props);
    this.state = {
        screenWidth: Dimensions.get('window').width,
        heightScaled: null,
    };  
  }   

<View style={styles.videoView}>
       <Video 
          source={video}
          ref={(ref) => { this.player = ref }}  
          repeat={true}
          resizeMode={"contain"}
          style={{
              width: this.state.screenWidth,
              height: this.state.heightScaled,
           }}
          onLoad={response => {
                const { width, height } = response.naturalSize;
                const heightScaled = height * (this.state.screenWidth / width);

                response.naturalSize.orientation = "horizontal";
                this.setState({ heightScaled: heightScaled });
          }}
       />
</View>

风格

videoView: {
  flex: 1,
  width: Dimensions.get('window').width,
  height: 350
}

我正在从 api 获取视频，然后在视频组件中使用react-native-video. 我不知道如何在不拉伸视频的情况下调整视频大小以适应视图。

这是上面代码的结果。

我不希望我的视频越过我在图像中标记的红线。请帮我。从过去的 3 天开始，我一直被这个问题困扰。

Answer 1

<View />在父<View />容器内再添加一个<Video />将解决视频的溢出问题。

<View style={styles.videoView}>
  <Video
    resizeMode={"contain"}
    style={{
      flex: 1
    }}
  />
  <View style={{flex: 1}}>
     {/* Components after red line can be rendered here */}
  </View>
</View>