使用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}/>