react-native - onchangetext - text input

¿Cuál es una alternativa de textarea en reaccion-native?

Question

¿Hay algún componente integrado en el área de texto para reaccionar nativo? He intentado implementar estos:

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

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

pero obteniendo un error "Se esperaba que una clase de componente tuviera un objeto objeto".

Answer 1

Construyo áreas de texto en reactivo nativo envolviendo un componente TextInput en una View la siguiente manera:

  <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"
  }
})

Answer 2

Estoy usando este componente: https://www.npmjs.com/package/react-native-autogrow-textinput

Se expande automáticamente el crecimiento en el texto. Creé mi propio componente reutilizable con el autogrow-textinput como parte de él, que dentro del componente se ve así:

<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}
/>

Answer 3

Sí hay. Se llama TextInput, el componente TextInput normal admite varias líneas.

Simplemente asigne las siguientes propiedades a su componente TextInput

multiline = {true}
numberOfLines = {4}

Al final debes tener esto:

<TextInput
    multiline={true}
    numberOfLines={4}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}/>

Answer 4

Si desea ver su componente TextInput como un área de texto, deberá agregar este

<TextInput
    multiline={true}
    numberOfLines={10}
    style={{ height:200, textAlignVertical: ''top'',}}/>

Answer 5

Si solo está utilizando componentes nativos de reacción, su opción es TextInput

Como explicó "funkysoul":

Simplemente asigne las siguientes propiedades a su componente TextInput

multiline = {true}
numberOfLines = {4}

Si desea ver este componente como el área de textarea clásica (más grande que una entrada de texto en línea), normalmente deberá agregar la propiedad de estilo de height . Vea el siguiente ejemplo:

 <TextInput
     multiline={true}
     numberOfLines={10}
     style={{ height:200, backgroundColor:''red''}}
 />

Agregué el backgroundColor para una mejor comprensión del rol de la height . Por favor, no lo use en su proyecto;)