[RN공부하기] [4]Text Input

(1) TextInput에 대한 공식문서 읽고

https://reactnative.dev/docs/textinput

TextInput · React Native

(2) TextInput 추가하기

//App.js
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

//App.js
export default function App() {

  const [name, setName] = useState("Gwang");
  const [age, setAge] = useState(0);
  const [person,setPerson] = useState({name: 'maria', age: 40});

  const ClickHandler = () => {
    setName("Seong");
    setPerson({name:'ilac', age:29});
  }
  return (
    <View style={styles.container}>
        <Text>my name is : {name}</Text>
        <Text>my age is : {age}</Text>
        <Text>his name : {person.name}</Text>
        <Text>his age : {person.age}</Text>
        <View style={styles.buttonContainer}>
          <Text>Name Input</Text>
          <TextInput 
            multiline
            style={styles.Inputs}
            placeholder='John'
            onChangeText={ (val) => setName(val)}
          />
          <Text>Age Input</Text>
          <TextInput 
            keyboardType="numeric"
            style={styles.Inputs}
            placeholder='0'
            onChangeText={ (val) => setAge(val)}
          />
          <Button 
            title='update' 
            onPress = {ClickHandler}
          ></Button>
        </View>
    </View>
  );
}

(3) 결과화면