使用React Native自动缩放图像高度

Question

在我的React Native应用程序中，我从具有未知尺寸的API中提取图像。如果我知道我想要的宽度，如何自动缩放高度？

实施例：

我设置宽度为Dimensions.get('window').width。如何设置高度并保持相同的比例？

export default class MyComponent extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     imgUrl: 'http://someimg.com/coolstuff.jpg' 
    } 
    } 

    componentDidMount() { 
    // sets the image url to state 
    this.props.getImageFromAPi() 
    } 

    render() { 
    return (
     <View> 
     <Image 
      source={uri: this.state.imgUrl} 
      style={styles.myImg} 
     /> 
     <Text>Some description</Text> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create(
    myImg: { 
    width: Dimensions.get('window').width, 
    height: >>>???what goes here???<<< 
    } 
) 

Answer 1

试试这个：

import React, { Component, PropTypes } from 'react'; 
import { Image } from 'react-native'; 

export default class ScaledImage extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {source: {uri: this.props.uri}}; 
    } 

    componentWillMount() { 
     Image.getSize(this.props.uri, (width, height) => { 
      if (this.props.width && !this.props.height) { 
       this.setState({width: this.props.width, height: height * (this.props.width/width)}); 
      } else if (!this.props.width && this.props.height) { 
       this.setState({width: width * (this.props.height/height), height: this.props.height}); 
      } else { 
       this.setState({width: width, height: height}); 
      } 
     }); 
    } 

    render() { 
     return (
      <Image source={this.state.source} style={{height: this.state.height, width: this.state.width}}/> 
     ); 
    } 
} 

ScaledImage.propTypes = { 
    uri: PropTypes.string.isRequired, 
    width: PropTypes.number, 
    height: PropTypes.number 
}; 

我传递URL作为一个道具叫uri。你可以指定你的width道具为Dimensions.get('window').width并且应该覆盖它。

请注意，如果您知道要设置高度以及需要调整宽度以保持比例，这也会起作用。在这种情况下，您将指定height支柱，而不是width。

Answer 2

先试试这个，看看它是否适合你：https://github.com/facebook/react-native/commit/5850165795c54b8d5de7bef9f69f6fe6b1b4763d

如果没有，那么你就可以实现自己的图像组件。但不是将宽度当作道具，而是覆盖onLayout方法，该方法可以给出所需的宽度，以便可以计算高度。如果你不知道宽度并且希望RN为你做布局，这会更好。缺点是在布局和渲染一次后调用onLayout。所以你可能会注意到你的组件在一点点移动。

Answer 3

看看这个库react-native-scalable-image。它完全符合你的要求。

Answer 4

这里有一个要点一个相当简单的解决方案，充分利用@Haitao Li的提案中使用的aspectRatio：

https://gist.github.com/tpraxl/02dc4bfcfa301340d26a0bf2140cd8b9

没有魔法，没有必要计算。纯粹的“CSS”，如果你知道原始图像的尺寸。

Answer 5

打字稿版本@TheJizel答案可选style财产和failure回调的Image.getSize：

import * as React from 'react' 
import {Image} from 'react-native' 

interface Props { 
    uri: string 
    width?: number 
    height?: number 
    style? 
} 

interface State { 
    source: {} 
    width: number 
    height: number 
} 

export default class ScaledImage extends React.Component<Props, State> { 
    constructor(props) { 
     super(props) 
     this.state = { 
      source: {uri: this.props.uri}, 
      width: 0, 
      height: 0, 
     } 
    } 

    componentWillMount() { 
     Image.getSize(this.props.uri, (width, height) => { 
      if (this.props.width && !this.props.height) { 
       this.setState({width: this.props.width, height: height * (this.props.width/width)}) 
      } else if (!this.props.width && this.props.height) { 
       this.setState({width: width * (this.props.height/height), height: this.props.height}) 
      } else { 
       this.setState({width: width, height: height}) 
      } 
     }, (error) => { 
      console.log("ScaledImage:componentWillMount:Image.getSize failed with error: ", error) 
     }) 
    } 

    render() { 
     return <Image source={this.state.source} style={[this.props.style, {height: this.state.height, width: this.state.width}]}/> 
    } 
} 

用法示例：

<ScaledImage style={styles.scaledImage} uri={this.props.article.coverImageUrl} width={Dimensions.get('window').width}/>