react-native(리액트 네이티브) component - TextInput

react-native(리액트 네이티브) component - TextInput

import React, { Component } from 'react';

import { AppRegistry, View, Text, TextInput, TouchableOpacity } from 'react-native';

class UselessTextInput extends Component {

render() {

return (

<TextInput

{...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below

editable = {true}

maxLength = {40}

/>

);

}

}

export default class UselessTextInputMultiline extends Component {

constructor(props) {

super(props);

this.state = {

text: 'Useless Multiline Placeholder',

};

}

// If you type something in the text box that is a color, the background will change to that

// color.

render() {

return (

<View>

<TouchableOpacity>

<Text>If you type something in the text box that is a color, the background will change to that color.</Text>

</TouchableOpacity>

<View style={{

backgroundColor: this.state.text,

borderBottomColor: '#000000',

borderBottomWidth: 1 }}

>

<UselessTextInput

multiline = {true}

numberOfLines = {4}

onChangeText={(text) => this.setState({text})}

value={this.state.text}

/>

</View>

</View>

);

}

}

// skip these lines if using Create React Native App

AppRegistry.registerComponent(

'AwesomeProject',

() => UselessTextInputMultiline

);