web-dev-qa-db-fra.com

React Native TextInput non visible iOS

J'ai le résultat de rendu suivant dépouillé:

return (
  <View style={{backgroundColor:'red'}}>
    <TextInput value={'Hello'}/>
  </View>
);

Le TextInput généré n'est pas visible dans iOS, à moins que je spécifie la hauteur, et lors de l'utilisation de flexDirection: 'row' dans son conteneur, je dois également spécifier sa largeur.

Cela ne se produit qu'avec iOS, Android semble fonctionner comme prévu. 

Existe-t-il un moyen d’afficher un TextInput dans iOS sans taille fixe? 

Dépendances actuelles:

  "dependencies": {
    "react-native": "=0.18.1",
    "react-native-orientation": "=1.12.2",
    "react-native-vector-icons": "=1.1.0"
  },

iOS: 

 enter image description here

Android: 

 enter image description here

Changer le rendu comme ceci: 

return (
  <View style={{backgroundColor:'red'}}>
    <Text>text</Text>
    <TextInput value={'Hello'}/>
  </View>
);

a le résultat suivant:

iOS:

 enter image description here

Android:

 enter image description here

iosreact-native
15
Giannis

Vous devez définir une hauteur pour textInput. Essayer:

return (
  <View style={{backgroundColor:'red'}}>
    <Text>text</Text>
    <TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'}/>
  </View>
);

Ou, si vous ne souhaitez pas définir de hauteur sur votre TextInput, vous pouvez définir la hauteur sur la vue qui le contient et flex: 1 sur TextInput:

<View style={{ height:60 }}>
    <TextInput style={{ flex:1, backgroundColor: '#ededed' }} />
</View>
29
Nader Dabit

Face au même problème, mais rendu lors de la suppression de alignItems:'center' de la vue parent la plus élevée dans la fonction render().

1
Jayakrishnan Menon

lorsque nous utilisons un TextInput dans réag-native, le TextInput ne sera pas développé pour occuper l'espace disponible par défaut, mais nous aurons à ajouter une règle de style indiquant la taille de TextInput. Si vous ne pouvez pas ajouter de style pour TextInput avec une hauteur impossible à afficher le TextInput

0
Dulanga Heshan