如何在 React Native 中将图像宽度设置为 100% 并将高度设置为自动？

IT技术 javascript image reactjs react-native
2021-04-02 16:27:53

我正在尝试在滚动视图中显示图像列表。宽度应该是 100%，而高度应该是自动的，保持纵横比。

我所做的搜索指向了提供全屏背景样式的各种解决方案。

const styles = StyleSheet.create({
    image: {
        width: null,
        height: 300,
        resizeMode: 'cover'
    }
});

<ScrollView style={{flex: 1}}>
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/>
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/>
</ScrollView>

我尝试了各种宽度的组合：null、height:null、flex:1、alignSelf 等。上面的解决方案几乎可以工作，除了高度不是动态的。部分图像不可见。

6个回答

因此，经过一段时间的思考，我能够在 react-native 图像中实现 height: auto 。您需要知道图像的尺寸才能使此 hack 起作用。只需在任何图像查看器中打开您的图像，您就会在文件信息中获得图像的尺寸。作为参考，我使用的图像大小为 541 x 362

首先从 react-native 导入 Dimensions

import { Dimensions } from 'react-native';

那么你必须得到窗口的尺寸

const win = Dimensions.get('window');

现在计算比率为 

const ratio = win.width/541; //541 is actual image width

现在将样式添加到您的图像中 

imageStyle: {
    width: win.width,
    height: 362 * ratio, //362 is actual height of image
}
截至 2020 年 3 月，这仍然是最佳解决方案吗？
2021-05-26 16:27:53
这么聪明的解决方案
2021-06-04 16:27:53
是的！这是唯一一种在所有情况下都有效的方法。唯一需要考虑的是，您可以很容易地解析图像尺寸，以防它们是静态资产。做就是了：import myImage from '../../assets/myimage.png'; const { width, height } = Image.resolveAssetSource(myImage)
2021-06-06 16:27:53
非常感谢。它也适用于 2021 年。为什么 React 团队从来没有构建一些功能来让开发人员更容易做到这一点？
2021-06-06 16:27:53
你是天才。我仍然无法弄清楚这一点。但它有效:)
2021-06-15 16:27:53

"resizeMode"不是样式属性。应该Props像下面的代码一样移动到图像组件。

const win = Dimensions.get('window');

const styles = StyleSheet.create({
    image: {
        flex: 1,
        alignSelf: 'stretch',
        width: win.width,
        height: win.height,
    }
});

...
    <Image 
       style={styles.image}
       resizeMode={'contain'}   /* <= changed  */
       source={require('../../../images/collection-imag2.png')} /> 
...

图像的高度不会自动变为，因为图像组件在style props. 因此，您可以使用getSize()方法计算像这个答案这样的远程图像，也可以计算像这个答案这样的静态图像的图像比例。

有很多有用的开源库——

根据facebook.github.io/react-native/docs/image.html，它是图像的样式属性。将其更改为属性也不起作用。
2021-06-07 16:27:53
这并没有从很多角度回答这个问题。除了上述评论中所说的内容外，该文档还明确指出 getSize() “不适用于静态图像资源”。
2021-06-08 16:27:53
这有效，但您应该说您需要“从‘react-native’导入{维度}；”
2021-06-10 16:27:53
@Betty 我认为 getSize() 确实适用于静态图像。
2021-06-12 16:27:53
这不能回答给定的自动计算高度的问题
2021-06-15 16:27:53

如果您知道图像的宽高比（宽度/高度），我已经找到了宽度的解决方案：“100%”，高度：“自动”。

这是代码：

import { Image, StyleSheet, View } from 'react-native';

const image = () => (
    <View style={styles.imgContainer}>
        <Image style={styles.image} source={require('assets/images/image.png')} />
    </View>
);

const style = StyleSheet.create({
    imgContainer: {
        flexDirection: 'row'
    },
    image: {
        resizeMode: 'contain',
        flex: 1,
        aspectRatio: 1 // Your aspect ratio
    }
});

这是我可以在不使用onLayout或Dimension计算的情况下使其工作的最简单的方法。如果需要，您甚至可以将其包装在一个简单的可重用组件中。如果有人正在寻找简单的实现，请试一试。

我对上述所有解决方案都有问题。最后我使用了 aspectRatio 来解决这个问题。当您知道图像的宽度和高度并且它们很大时，只需计算宽高比并将其添加到图像中，例如：

<PhotoImage
    source={{uri: `data:image/jpeg;base64,${image.base64}`}}
    style={{ aspectRatio: image.width / image.height }}
 />

AspectRatio 是 React Native 的布局属性，用于保持图像的纵横比并适合父容器：https : //facebook.github.io/react-native/docs/layout-props#aspectratio

这是唯一真正的答案。就此展开。如果您从网络请求图像。您可以使用Image.getSize静态方法从react-native
2021-05-31 16:27:53

在样式中使用aspectRatio属性

纵横比控制节点未定义维度的大小。纵横比是一个非标准属性，仅在 react native 中可用，在 CSS 中不可用。

  • 在具有设置的宽度/高度纵横比的节点上控制未设置尺寸的大小
  • 如果未设置，则在具有设置的 flex 基础纵横比的节点上控制交叉轴中节点的大小
  • 在具有测量函数纵横比的节点上，测量函数就像测量 flex 基础一样工作
  • 在具有 flex 增长/收缩纵横比的节点上，如果未设置，则控制横轴中节点的大小
  • 纵横比考虑最小/最大尺寸

文档：https : //reactnative.dev/docs/layout-props#aspectratio

试试这样：

import {Image, Dimensions} from 'react-native';

var width = Dimensions.get('window').width; 

<Image
    source={{
        uri: '<IMAGE_URI>'
    }}
    style={{
        width: width * .2,  //its same to '20%' of device width
        aspectRatio: 1, // <-- this
        resizeMode: 'contain', //optional
    }}
/>
其它你可能感兴趣的问题
上一篇react按钮点击重定向页面 下一篇React - 解构时的 defaultProps 与 ES6 默认参数（性能问题）