製作相對於另一個維度陣營本地

陣營原住民，我需要的圖像有，即，它的高度爲寬度的一定比例。

代碼

在圖片中，背景是與內部另一圖像的圖像。我正在使用樣式化的組件。

export const ImageWithButtonStyled = styled.TouchableOpacity` 
    padding: ${Spacing.XLarge} 
    alignItems: center 
    width: 50% 
`; 

export const ImageWithButtonImageContentStyled = styled.View` 
`; 

export const ImageWithButtonBackgroundStyled = styled.Image` 
    marginLeft: ${Spacing.Large} 
    marginRight: ${Spacing.Large} 
    backgroundColor: ${Color.GrayLight} 
    borderWidth: 1 
    borderColor: ${Color.Gray} 
    justifyContent: center 
    alignItems: center 
    width: 100% 
`; 

export const ImageWithButtonButtonContentStyled = styled.View` 
alignSelf: stretch 
alignContent: center 
`;

這是他們如何在一個組件render()方法被使用：

render() { 
    return (
     <ImageWithButtonStyled> 
     <ImageWithButtonBackgroundStyled source={null}> 
      <Image source={require('../assets/ic_photo/ic_photo.png')}/> 
     </ImageWithButtonBackgroundStyled> 
     <ImageWithButtonButtonContentStyled> 
      <LinkButton text={this.props.buttonText} /> 
     </ImageWithButtonButtonContentStyled> 
     </ImageWithButtonStyled> 
    ); 
    }

我正在尋找

我要找的結果是這樣的：

但是不必硬編碼任何尺寸，僅使用百分比並將高度設置爲寬度的百分比，以便灰色框可以在任何屏幕中保持我定義的高寬比，並進行相應的縮放。所以，如果我說高度是寬度的1.4倍，那麼該方面將保持在任何屏幕上。

任何幫助非常感謝，謝謝。

來源

2017-09-19 FabioR

看一看[反應 - 本機可擴展的圖像（https://www.npmjs.com/package/ react-native-scalable-image） –

由於react-native中的寬度和高度值無法使用，因此您無法使用類似width: 50%之類的內容，因此應在應用中使用Dimension。您可以使用下面的代碼獲取屏幕的尺寸和用什麼風格你的組件，如width: width/2

import {Dimensions} from 'react-native' 
... 
let {height, width} = Dimensions.get('window')

來源

2017-09-19 15:29:32

事情是，％不是一個單位，它是缺少的，不是嗎？由於它是（單位）/（單位）。也許這就是爲什麼它一直在工作。儘管您的解決方案有效，但我想直接在樣式中設置它，否則，我會將樣式傳遞給組件類，這是我想避免的。但是，如果沒有其他解決方案... – FabioR

您可以在'style'道具或'StyleSheet'對象中的任何位置使用此'Dimension'。當然我應該說，製作佈局和樣式的最佳方式是使用'Flex'。你可以閱讀這個鏈接瞭解更多信息：https：//facebook.github.io/react-native/docs/height-and-width.html –

製作相對於另一個維度陣營本地

回答

相關問題