提问者:小点点

如何使用React Native强制图像全宽并保持长宽比?


我有一个从URL拉下来的图像。我事先不知道这个图像的尺寸。

如何设置样式/布局图像,使其成为父视图的全宽,并计算高度以保持长宽比?

我尝试过在0.34.0-rc.0中使用onLoad,并且在event. nativeEvent.source中高度/宽度都是0。

图像在


共3个答案

匿名用户

我的使用非常相似,因为我需要显示全屏宽度但保持其长宽比的图像。

根据@JasonGaare对使用Image. getSize()的回答,我想出了以下实现:

class PostItem extends React.Component {

  state = {
    imgWidth: 0,
    imgHeight: 0,
  }

  componentDidMount() {

    Image.getSize(this.props.imageUrl, (width, height) => {
      // calculate image width and height 
      const screenWidth = Dimensions.get('window').width
      const scaleFactor = width / screenWidth
      const imageHeight = height / scaleFactor
      this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
    })
  }

  render() {

    const {imgWidth, imgHeight} = this.state

    return (
      <View>
        <Image
          style={{width: imgWidth, height: imgHeight}}
          source={{uri: this.props.imageUrl}}
        />
        <Text style={styles.title}>
          {this.props.description}
        </Text>
      </View>
    )
  }
}

匿名用户

我是react-native的新手,但我使用简单的风格遇到了这个解决方案:

imageStyle: {
  height: 300,
  flex: 1,
  width: null}

它对我有用。

匿名用户

React Native内置了一个函数,它将返回图像的宽度和高度:Image. getSize()。在这里查看留档