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;)