web-dev-qa-db-fra.com

React TextInput natif multi-lignes, le texte est centré

Donc, lors de l'utilisation de la saisie de texte avec multiline = true, j'ai ce problème où le texte est centré verticalement au lieu d'être poussé vers le haut.

Ce problème se produit à la fois sur iOS et Android, sauf Android a un autre problème où, lorsque plusieurs lignes sont entrées, ils sont mis en boîte aux lettres à la hauteur d'une ligne.

Je voudrais souligner, j'ai essayé d'ajouter textAlignVertical: 'top' au style de l'entrée de texte

Code: (J'ai ceci comme un copmonent séparé car je l'utilise dans des formulaires avec du texte de formulaire mais tous les paramètres sont passés quelque chose)

    <TextInput
            style={styles.input}
            value={value}
            autoComplete={autoComplete}
            autoCapitalize={autoCapitalize}
            placeholder={placeholder}
            secureTextEntry={secureTextEntry}
            keyboardType={keyboardType}
            returnKeyType={returnKeyType}
            autoFocus={autoFocus}
            onChangeText={onChangeText}
            onSubmitEditing={onSubmitEditing}
            multiline={multiline || false}
            ref={(r) => { inputRef && inputRef(r); }}
    />

modes:

input: {
    paddingRight: 10,
    lineHeight: 23,
    flex: 2,
    textAlignVertical: 'top'
},

capture d'écran iOS 

capture d'écran Android 

androidiosreactjsreact-nativetextinput
10
Red

Il s'est donc avéré que la vue entourant l'entrée de texte avait alignItems: 'center' qui a centré le texte dans la saisie de texte.

Donc changé ça en alignItems: this.multiline ? 'flex-start' : 'center',

Aussi pour le Android, j'ai dû ajouter numberOfLines={5} qui a corrigé la boîte aux lettres

1
Red

Si quelqu'un est confronté au même problème, essayez textAlignVertical: "top" Cela marche. Pour plus d'informations, essayez https://github.com/facebook/react-native/issues/13897

19
Subhendu Kundu

j'ai essayé ceci pour vous s'il vous plaît laissez-moi savoir si c'est correct

 <TextInput
            style={styles.input}
            value={this.state.value}
            onChangeText={text=>this.setState({value:text})}
            multiline={true}
            underlineColorAndroid='transparent'
    />

style comme

  input: {
    width:200,
    borderBottomColor:'red',
    borderBottomWidth:1,
},

et le lien expo peut vous aider cliquez ici

3
chetan godiya