在React Native ScrollView中将图像缩小到设备宽度

3 回答

• 1

  根据@ martinarroyo的评论，我将 contentContainerstyle={{flex:1}} 添加到ScrollView中，如下所示：

  <ScrollView contentContainerStyle={{flex:1}}>
      <Image resizeMode="contain" style={{flex: 1, width: undefined, height: undefined}} source={this.props.images.infoImage} />
  </ScrollView
  

  这完全解决了我的问题 . 图像是显示器的整个宽度，同时保持正确的宽高比 .

  EDIT: 原来图像帧高度保持不变但图像缩小 . 这意味着它在顶部和底部有大块填充物 . 截至目前，我不知道如何删除它 .

  EDIT 2:

  似乎没有_1581819的解决方案 . 我创建了一个自定义组件，它采用所需的宽度/高度约束并根据它进行缩放 . 我需要将它用于本地文件， Image.getSize() 方法不起作用，所以我通过传入包含宽度和高度的维度对象来修改Ihor的解决方案以允许它 .

  import React from 'react';
  import { Image } from 'react-native';
  
  export default class ScalableImage extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              width: null,
              height: null,
          }
      }
  
      componentDidMount() {
          if(typeof this.props.source === 'string') {
              Image.getSize(this.props.source, this._calculateImageDimensions, console.log);
          } else if(this.props.dimensions) {
              this._calculateImageDimensions(this.props.dimensions.width, this.props.dimensions.height)
          }
      }
  
      render() {
          return (
              <Image
                  { ...this.props }
                  style={[
                      this.props.style,
                      { width: this.state.width, height: this.state.height }
                  ]}
              />
          );
      }
  
      _calculateImageDimensions(width, height) {
          let ratio;
  
          if (this.props.width && this.props.height) {
              ratio = Math.min(this.props.width / width, this.props.height / height);
          }
          else if (this.props.width) {
              ratio = this.props.width / width;
          }
          else if (this.props.height) {
              ratio = this.props.height / height;
          }
  
          this.setState({ width: width * ratio, height: height * ratio });
      }
  }
  
  ScalableImage.propTypes = {
      width: React.PropTypes.number,
      height: React.PropTypes.number,
      dimensions: React.PropTypes.object
  };
  

  我然后使用它：

  <ScalableImage source={require('../path/to/local/image.png')} 
                 width={Dimensions.get('window').width()} 
                 dimensions={{width: 700, height: 400}} />
  

  回复于 2024-05-15T03:56:27+08:00
• 0

  作为最后一个资源，您可以使用Dimensions .

  在每个 render 获取窗口的宽度和高度，这样你就可以解释尺寸的变化（基本上是旋转），并且会匹配每个设备 .

  你可以像这样使用它：

  import {Dimensions} from 'react-native'+
  // Then, in your component:
  render(){
      const {width, height} = Dimensions.get('window'):
      return (<ScrollView style={{flex:1}}>
       <Image resizeMode="contain" style={{flex: 1, height, width}} source={this.props.images.infoImage} />
  </ScrollView>)
  }
  

  回复于 2024-05-15T03:56:27+08:00
• 0

  我最终在custom Image component中包装了React Image，它动态计算高度以保持图像比率为 onComponentDidMount ：

  Image.getSize(this.props.source.uri, (width, height) => {
      let ratio;
  
      if (this.props.width && this.props.height) {
          ratio = Math.min(this.props.width / width, this.props.height / height);
      }
      else if (this.props.width) {
          ratio = this.props.width / width;
      }
      else if (this.props.height) {
          ratio = this.props.height / height;
      }
  
      this.setState({ width: width * ratio, height: height * ratio });
  }, console.log);
  

  然后我就这样使用它：

  <Image width={Dimensions.get('window').width} source={{uri: '<image uri>'}} />
  

  回复于 2024-05-15T03:56:27+08:00