colonne à l'intérieur de la grille prend une demi-largeur réagir-base native

J'utilise React Native Base pour mon application iPad et je suis en train de deux Col composants à l'intérieur d'un composant Grid comme ceci:colonne à l'intérieur de la grille prend une demi-largeur réagir-base native

<Container style={styles.container}> 
    <Header style={styles.header}> 
    <Body> 
     <Title>Header</Title> 
    </Body> 
    </Header> 
    <Content style={styles.mainContent}> 
    <Grid> 
     <Col style={styles.leftContent}> 
     </Col> 
     <Col style={styles.rightContent}> 
     </Col> 
    </Grid> 
    </Content> 
</Container>

ma feuille de style est comme ceci:

const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: '#ccc' 
    }, 
    mainContent: { 
    marginTop: 10, 
    }, 
    header: { 
    backgroundColor: '#fff' 
    }, 
    leftContent: { 
    width: 340, 
    height: 686, 
    backgroundColor: "green", 
    marginLeft: 5, 
    }, 
    rightContent: { 
    width: 614, 
    height: 686, 
    backgroundColor: "yellow", 
    marginLeft: 10, 
    marginRight: 5, 
    },

Les deux Col prennent presque la même largeur et non la largeur donnée. Comment devrais-je faire ces composants pour prendre la largeur donnée?

Source

2017-08-07 sahil solanki

avez-vous essayé d'utiliser flex? –

i ont une idée, vous pouvez à l'aide flex dans votre col style premier est la mise en composant parent flex à 1 et vous pouvez ajouter flex dans le composant enfant à l'aide 0.4 ou 0.6 etc. Ceci est l'exemple de code de votre le style

const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: '#ccc' 
    }, 
    mainContent: { 
    marginTop: 10, 
    flex: 1 //this is for parent style 
    }, 
    header: { 
    backgroundColor: '#fff' 
    }, 
    leftContent: { 
    flex : 0.4, //this is for width col 
    height: 686, 
    backgroundColor: "green", 
    marginLeft: 5, 
    }, 
    rightContent: { 
    flex: 0.6, //this is for width col 
    height: 686, 
    backgroundColor: "yellow", 
    marginLeft: 10, 
    marginRight: 5, 
    } 
});

Espérons que cela peut vous aider, merci :)

Source

2017-08-08 10:00:37

Flex a travaillé pour moi mais est-ce bien de faire une valeur de 0,614 ou de 0,34? –

vous pouvez essayer de définir comme ça, je pense que cela devrait aussi fonctionner –

utiliser flex afin que vous puissiez donner à vos composants taille spécifique dans ce cas. L'ajout de la propriété CSS flex: 0.5 à vos deux composants leur donnera la moitié de la taille de leurs parents s'il a flex: 1 ensemble.

De cette façon, vous pouvez leur donner des rapports de taille spécifiques entre 0 et 1. Par exemple:

parent: { 
    flex: 1, 
}, 
childone: { 
    flex: 0.35, 
}, 
childtwo: { 
    flex: 0.65, 
}

Juste chang valeurs enfant flex pour tout ce que vous voulez et identifier le composant est votre parent et qui sont les enfants.

Source

2017-08-08 10:07:32

colonne à l'intérieur de la grille prend une demi-largeur réagir-base native

Répondre

Questions connexes