NativeBase卡擬合/縮放卡內的圖像

第一：我看過this，但沒有找到我要找的東西。NativeBase卡擬合/縮放卡內的圖像

我想創建這樣的

但我有一些問題的大圖像的大小調整。我發現我可以做內聯風格和使用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;

來源

2016-12-14 Norfeldt

您是否正在根據設備的尺寸調整圖像大小？

如果是這樣，你可以使用：

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將返回最接近的大小的圖像的裝置屏幕/像素比例。

來源

2016-12-21 19:09:30

我會做的第一件事是包裹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）的圖像這產生：

通過使用圖像以正確的縱橫比它看起來更好：

來源

2016-12-18 10:42:06 Eldelshell

NativeBase卡擬合/縮放卡內的圖像

回答

相關問題