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를 고려해야하므로 다양한 크기의 이미지를 저장하여 크기/업 스케일링이 이미지 품질에 영향을 미치지 않도록하는 것이 좋습니다. 된 GetImage 장치 화면/픽셀 비율은 가장 가까운 크기의 이미지를 반환

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

출처

2016-12-21 19:09:30

우선은 View에 Image을 래핑하는 것입니다 내 코드입니다. 그런 다음 이미지의 종횡비와 일치하는 높이를 설정 한 다음 resizeMode: 'contain'을 사용하십시오.

어쨌든, 이것은 가장 가까운 I 얻을 수 :

<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 카드를 카드에 끼워 넣기/크기 조정하기

답변

관련 문제