Question

首先：我看过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;

Answer 1

我要做的第一件事就是将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）图像生成：

通过使用具有正确宽高比的图像，它看起来更好：

Answer 2

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

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

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将返回设备屏幕/像素比率的最近尺寸的图像。

NativeBase卡适合/缩放卡内的图像

2 个答案: