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

我希望一个图像出现在屏幕的整个宽度上，并进行缩放以保持其比例

我现在有这个

<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上的行为相同。）

所以我不得不自己计算

这会根据我的需要缩放图像，当手机旋转时，图像会重新缩放

我不确定

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

import React，{Component}来自“React”；
进口{
样式表，
文本，
看法
滚动视图，
形象,，
按钮
尺寸
}从“反应本族语”；
从“resolveAssetSource”导入resolveAssetSource；
从“react native router flux”导入{Actions}；
导出默认类主扩展组件{
measureView（事件）{
这是我的国家({
宽度：event.nativeEvent.layout.width，
高度：event.nativeEvent.layout.width
});
}
componentWillMount（）{
let source=resolveAssetSource（require（“./assets/images/map.png”）；
this.setState（{ratio:source.height/source.width}）；
}
render（）{
返回(
this.measureView（事件）}
>
一些标题文本
);
}
}

能否显示屏幕截图，显示输出的外观？你需要背景图像还是应该是可滚动的？应该是可滚动的。只是标题下的一个图像，适合纵向或横向屏幕的大小。你能试试

style={height:100，width:Dimensions.get（'window'）.width}resizeMode=“cover”

。这个方法很有效，但将高度固定在100px。。。我希望这是完整的图像。。。我想我可以做数学，但默认情况下不会发生这种情况吗？你在scrollview中，否则flex:1就可以了。。