web-dev-qa-db-fra.com

React Native: Comment définir la hauteur et la largeur de <TextInput /> sur <View /> conteneur?

J'ai actuellement un <TextInput> dans un <View> qui a un padding: 15. J'aimerais que la largeur et la hauteur de <TextInput>'s couvrent tout l'espace à l'intérieur de <View> à l'exception du remplissage.

J'ai donc essayé var width = Dimensions.get('window').width et les options suivantes, mais le < TextInput > respecte le remplissage à gauche, mais lorsque vous continuez à taper, il dépasse le remplissage à droite:

<View style = {{ padding: 15 }}> <TextInput style = {{ width: width }} /> </View>

Alors, comment puis-je obtenir que TextInput couvre tout l'espace, la hauteur et la largeur, dans View tout en respectant la règle de remplissage de View?

Je vous remercie

javascriptcssreactjsreact-nativejsx
6
Walter

Essayez de définir le style de TextInput sur flex: 1 au lieu d’obtenir la largeur. Le style Flex remplit automatiquement votre vue et laisse le remplissage vierge.

<View style = {{ padding: 15 }}> <TextInput style = {{ flex: 1 }} /> </View>
12
rudydydy

Une autre bonne réponse serait d'ajouter:

alignItems: 'stretch'

alignItems: 'stretch' étendra chaque élément enfant le long de l'axe transversal tant que l'élément enfant n'a pas la largeur (flexDirection: ligne) ou la hauteur spécifiée (flexDirection: colonne). Un séjour sans faille 

Dans votre conteneur, si vous en avez un, quelque chose comme:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
  }
});
7
Gonzalo Ortellado

essayez d’obtenir d’abord les dimensions de View:

<View 
    onLayout={(event) => {
        var {x_pos, y_pos, width, height} = event.nativeEvent.layout;
    }} 
/>

Ensuite, utilisez la largeur et la hauteur récupérées pour définir la largeur et la hauteur de votre TextInput. La seule chose à faire est d'obtenir ces valeurs au moment de l'exécution.

0
Jan Franz Palngipang