Make Dimension relativ zu einem anderen in Reaktion india

Question

Das Problem

Ich bin in auf eine App arbeiten Reagieren Einheimischer und ich brauche ein Bild zu haben, das heißt, seine Höhe mit einem bestimmten Prozentsatz der Breite.

Der Code

Im Bild ist der Hintergrund ein Bild mit einem anderen im Inneren Bild. Ich verwende gestylte Komponenten.

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 
`; 

Dies ist, wie sie in einer Komponente render() Verfahren verwendet werden:

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

Was ich suche

Das Ergebnis ich suche das ist:

Aber ohne eine Dimension hart codieren zu müssen, verwenden Sie einfach Prozentwerte und stellen die Höhe als Prozentsatz der Breite ein, so dass die graue Box in jedem Bildschirm das von mir definierte Bildseitenverhältnis enthält. Also, wenn ich sage, dass die Höhe 1,4 der Breite ist, wird dieser Aspekt in jedem Bildschirm beibehalten.

Jede Hilfe wird sehr geschätzt, danke.

Answer 1

Da die Werte für Breite und Höhe in der react-native Unitless sind und Sie nicht so etwas wie width: 50% verwenden können, sollten Sie die Dimension in Ihrer App verwenden. Sie können die Abmessungen des Bildschirms mit dem Code unten erhalten und haben Ihre Komponenten mit so etwas wie width: width/2

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