如何在React Native中自动缩放图像?

塞姆雷格

有一幅固定的图片aspectRatio何时调整尺寸以适合容器或计算高度width: '100%'

李健

要将图片仅以width = 100%放入容器中,请尝试width = 100%+ resizeMode = contain

例如


<Image

  resizeMode={'contain'}
  style={{ flex:1, 
  width:'100%',
        aspectRatio: 1 }}
  source={{uri: "https://www.yoursite.com/images/" + item.photo}}
/>  


要么

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在 React Native 中缩放图像?

来自分类Dev

如何在React Native中优化图像

来自分类Dev

如何在React Native中优化图像

来自分类Dev

如何在android中水平滚动时聚焦时自动缩放图像

来自分类Dev

在Android中滚动时如何在聚焦时自动缩放图像

来自分类Dev

如何在 Azure 中自动缩放 VM

来自分类Dev

如何在ffmpeg中缩放覆盖图像

来自分类Dev

如何在div中缩放图像行

来自分类Dev

缩放/缩放后如何在Canvas中拖动图像/对象?

来自分类Dev

如何在React Native中处理图像序列

来自分类Dev

如何在React native中动态设置图像的来源?

来自分类Dev

如何在React Native中重复图案图像以创建背景?

来自分类Dev

如何在React Native中为图像添加标题

来自分类Dev

如何在 React Native 中显示渐变 SVG 图像

来自分类Dev

如何在 React Native 中引用启动图像

来自分类Dev

如何在 React Native 中显示 https 图像?

来自分类Dev

如何以编程方式在 Android 中的按钮中缩放或自动适应 Drawable Top 的图像?

来自分类Dev

如何从jlable中获取图像以自动缩放或调整为JLabel的大小

来自分类Dev

如何缩放画布中的图像?

来自分类Dev

带有React Native的Stretchy Header(在ScrollView中向下拉并缩放顶部图像)

来自分类Dev

如何在iOS 8中禁用自动应用缩放功能?

来自分类Dev

如何在自动缩放组中添加AWS New Elb

来自分类Dev

如何在DynamoDB表中禁用自动缩放?

来自分类Dev

如何在C中自动缩放浮点值?

来自分类Dev

如何在React中禁用图像

来自分类常见问题

如何在React Native中禁用旋转?

来自分类Dev

如何在React Native中渲染对象?

来自分类Dev

如何在React Native中显示图标?

来自分类Dev

如何在React Native中删除警告

Related 相关文章

热门标签

归档