Ce qui est une variante du textarea dans réagissent-natif?

Est-il construit dans la zone de texte du composant pour réagir indigènes? J'ai essayé de mettre en œuvre ceux-ci:

https://github.com/buildo/react-autosize-textarea

https://github.com/andreypopp/react-textarea-autosize

mais d'avoir une erreur "Attendu une classe de composant obtenu objet de l'objet".

OriginalL'auteur imran shoukat | 2017-01-16

47

Oui, il est. Il est appelé TextInput, le Composant TextInput prend en charge plusieurs lignes.

Suffit d'attribuer aux propriétés suivantes à votre Composant TextInput
```
multiline = {true}
numberOfLines = {4}
```
À la fin, vous devriez avoir ceci:
```
<TextInput
    multiline={true}
    numberOfLines={4}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}/>
```
OriginalL'auteur funkysoul
11

Je créer des zones de texte à réagir indigènes en l'enveloppant d'un TextInput composant dans un View la manière suivante:
```
  <View style={styles.textAreaContainer} >
    <TextInput
      style={styles.textArea}
      underlineColorAndroid="transparent"
      placeholder="Type something"
      placeholderTextColor="grey"
      numberOfLines={10}
      multiline={true}
    />
  </View>
```
...
```
const styles = StyleSheet.create({
  textAreaContainer: {
    borderColor: COLORS.grey20,
    borderWidth: 1,
    padding: 5
  },
  textArea: {
    height: 150,
    justifyContent: "flex-start"
  }
})
```
Merci pour cette. super facile / simple à mettre ensemble.
pour une raison quelconque numberOfLines n'est pas rien faire pour moi. Je ne sais pas si cet attribut est censé les aider dans l'expansion de la zone cliquable de la textInput ou quoi exactement.
disons que numberOfLines juste vous permettre de taper du texte sur plusieurs lignes lorsque vous le combinez avec "plusieurs" à true (dont la valeur par défaut est false, alors faites attention à ce prop). D'autre part, la "textAreaContainer" et "textArea" styles que j'ai ajouté dans l'exemple ci-dessus sont utiles pour faire de la saisie de texte ressemble à une zone de texte.
ouais j'ai lu que dans la documentation, mais numberOfLines ne fait rien dans le simulateur iOS au moins. Mais je crois que ce pourrait être une question pour un autre thread.
si vous le réglez sur 1 vous ne devriez pas être en mesure de remplir plus de 1 ligne...

OriginalL'auteur Nacho Justicia Ramos

Je suis l'aide de ce composant:
https://www.npmjs.com/package/react-native-autogrow-textinput

Il élargit automatiquement sur le texte de la croissance. J'ai créé mon propre composant réutilisable avec la croissance automatique-textinput dans le cadre de, ce qui à l'intérieur du composant ressemble à ça:

<AutoGrowingTextInput 
    minHeight={40}
    maxHeight={maxHeight} //this is a flexible value that I set in my 
        component, where I use this reusable component, same below, unless specified the other
    onChangeText={onChangeText}
    placeholder={placeholder}
    placeholderTextColor='#C7C7CD'
    style={inputStyle}
    value={value}
/>

OriginalL'auteur Eduard

2

Si vous voulez voir votre TextInput composant comme un textarea, vous devrez ajouter ce
```
<TextInput
    multiline={true}
    numberOfLines={10}
    style={{ height:200, textAlignVertical: 'top',}}/>
```
OriginalL'auteur Marvin Soto
0

Si vous utilisez seulement de réagir-composants natifs de votre option est TextInput

"Funkysoul", a expliqué:

Suffit d'attribuer aux propriétés suivantes à votre Composant TextInput

multiline = {true}

numberOfLines = {4}

Si vous voulez voir ce composant comme le classique textarea (plus grand qu'un texte en ligne-entrée), généralement, vous aurez besoin d'ajouter les height de style de la propriété. Voir l'exemple suivant:
```
 <TextInput
     multiline={true}
     numberOfLines={10}
     style={{ height:200, backgroundColor:'red'}}
 />
```
J'ai ajouté le backgroundColor pour une meilleure compréhension de la height rôle. S'il vous plaît ne pas l'utiliser sur votre projet 😉

OriginalL'auteur Manuel E Carpio

Vous devez vous connecter pour publier un commentaire.