Question

我正在设置图像显示器。图像正确显示。但是，有多余的多余区域我用灰色突出显示。我如何摆脱那个领域。这段代码是用react-native编写的。

我尝试使用AspectRadio。它会拉伸以覆盖整个灰色区域，但是仅显示部分图像。还尝试过resizeMode =“ cover”上面发生的相同事情。试图隐藏溢出，没有任何改变

render(){

        let aspect = null
        let imgW = null
        let imgH = null
        if (this.props.image){
            imgW = this.props.image.width
            imgH = this.props.image.height
            aspect = imgW / imgH
        }
        console.log(aspect)

        return(

            <View>
                <Image source={this.props.image} style={[styles.image]} />
                <Text>{this.props.description}</Text>



            </View>
        )
    }

}

const styles = StyleSheet.create({
    container:{
    },
    image:{
        resizeMode: 'contain',
        width: '100%',
        backgroundColor: '#D8D8D8',
    }
})

我希望只有这方面显示的图像是正确的。仅图像没有多余的空间。enter image description here

Answer 1

您尝试过吗？

  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    image: {
      flex: 1,
      resizeMode: 'cover', // or 'stretch'
    },
  });

Answer 2

您需要为容器提供高度/弯曲度和宽度。调整大小模式也是一种道具，而不是样式属性

  render() {
    let aspect = null;
    let imgW = null;
    let imgH = null;
    if (this.props.image) {
      imgW = this.props.image.width;
      imgH = this.props.image.height;
      aspect = imgW / imgH;
    }
    console.log(aspect);

    return (
      <View style={styles.container}>
        <Image
          source={this.props.image}
          style={[styles.image, { height: imgH }]}
          resizeMode={"contain"}
        />
        <Text>{this.props.description}</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%"
  },
  image: {
    width: "100%",
    backgroundColor: "#D8D8D8"
  }
});

无法缩放图像以适合屏幕。尝试过resizeMode和AspectRatio。如何缩放以适合身体？

2 个答案: