Question

我希望图像在屏幕的宽度上显示，并缩放以保持其比例。

我目前有这个

<ScrollView style={styles.background}>
<Text>Some Header Text</Text>
 <Image
    style={{width: null}}
    resizeMode="contain"
    source={require("./assets/images/map.png")}
   />
</ScrollView>

哪一半有效。图像在宽度上正确缩放。但它保留了它的高度，因此在图像的上方和下方有一个大的边框。（即布局仍然使用图像高度未缩放）

如果我添加height: null或用height替换宽度，则不会显示图像。

我怎么做（我期待）琐碎的事情？（在ios和android上的行为相同。）

Answer 1

所以我必须自己计算一下。

这会根据需要缩放图像，并在手机旋转时重新缩放图像。

我不确定componentWillMount是否是选择计算宽高比的正确事件。我很乐意为任何其他代码审查评论！

import React, {Component} from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  Button,
  Dimensions
} from "react-native";
import resolveAssetSource from "resolveAssetSource";
import {Actions} from "react-native-router-flux";

export default class Main extends Component {
  measureView(event) {
    this.setState({
       width: event.nativeEvent.layout.width,
       height: event.nativeEvent.layout.width
    });
  }
  componentWillMount() {        
    let source = resolveAssetSource(require("./assets/images/map.png"));
    this.setState({ratio: source.height / source.width});
  }
  render() {
    return (
      <ScrollView           
        onLayout={event => this.measureView(event)}
      >
        <Text style={styles.header}>
          Some Header Text
        </Text>

        <Image
          style={{
            width: this.state.width,
            height: this.state.width * this.state.ratio
          }}
          resizeMode="contain"
          source={require("./assets/images/map.png")}
        />  
      </ScrollView>
    );
  }
}

如何在react-native中动态缩放图像？

1 个答案: