[解決済み] React Nativeで画像の高さを自動調整する

質問

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???<<<
  }
)

どのように解決するのですか？

これを試してみてください。

 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 の代わりに