NativeBase 卡拟合/缩放卡内的图像答案

【问题标题】：NativeBase card fitting/scaling the image within the cardNativeBase 卡拟合/缩放卡内的图像
【发布时间】：2017-04-30 09:48:53
【问题描述】：

首先：我查看了this，但没有找到我要找的东西。

我想创造这样的东西

但是我在调整大图像的大小时遇到了一些问题。我发现我可以通过使用内联样式和使用height 和width 来修复像素。但我也希望它在 iPad 上看起来也不错……怎么办？

这是我的代码

import React, { Component } from 'react';
import { Image } from 'react-native';
import { List, Card, CardItem, Thumbnail, Text, Button, Icon } from 'native-base';

class ListEquipment extends Component {
  constructor() {
    super();
  }

  render () {
    return (
      <List style={{padding: 5}}
        dataArray={this.props.items}
        renderRow={(item) =>

          <Card >
            <CardItem>
                <Thumbnail source={require('../img/Robot-96.png')} />
                <Text>Card</Text>
                <Text note>Bonus Info</Text>
            </CardItem>

            <CardItem cardBody>
                <Image source={require('../img/micscrope.jpg')} />
                <Text>
                    Information goes here..
                </Text>
                <Button >
                    <Icon name="ios-beer" />
                    <Text>Cheers</Text>
                </Button>
            </CardItem>
         </Card>

        }
      />
    )
  }
};

export default ListEquipment;

【问题讨论】：

标签： react-native

【解决方案1】：

您是否希望根据设备大小调整图像大小？

如果是这样，您可以使用：

import SCREEN_IMPORT from 'Dimensions'
  
const SCREEN_WIDTH = SCREEN_IMPORT.get('window').width,
const SCREEN_HEIGHT = SCREEN_IMPORT.get('window').height,

然后您可以将宽度/高度内嵌设置为 SCREEN_HEIGHT 和 SCREEN_WIDTH 的百分比。

此外，您还需要考虑 pixelRatio，建议存储不同尺寸的图像，以便缩小/放大不会影响图像质量。

var image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />

getImage 将返回与设备屏幕/像素比率最接近的尺寸的图像。

【讨论】：

【解决方案2】：

我要做的第一件事是将Image 包裹在View 上。然后，设置一个与图像纵横比相匹配的高度，然后使用resizeMode: 'contain'。

无论如何，这是我能得到的最接近的：

<View style={{backgroundColor: 'green', margin: 10, borderColor: 'yellow', borderWidth: 2}}>
    <View style={{backgroundColor: 'green', padding: 10, borderBottomColor: 'yellow', borderBottomWidth: 2}}>
        <Text style={{fontSize: 20}}>Header</Text>
    </View>
    <View style={{backgroundColor: 'red'}}>
        <View style={{alignItems: 'center', height: 150}}>
            <Image source={require('./test.png')} style={{flex: 1, resizeMode: 'contain'}}/>
        </View>

        <View style={{backgroundColor: 'violet'}}>
            <Text style={{color: 'blue'}}>Description</Text>
        </View>
    </View>
</View>

生成 500x300(px) 的图像：

使用具有正确纵横比的图像看起来会更好：

【讨论】：