React Native / text input

input 태그를 사용하고자 할때 TextInput 사용 가능 

 

 

 

 

먼저, import 란에 TextInput 추가

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

 

 

 

 

App.js

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default function App() {
  const [name, setName] = useState('shaun');
  const [age, setAge] = useState('30');

  return (
    <View style={styles.container}>

      <Text>Enter name:</Text>
      <TextInput 
        multiline # 줄바꿈 가능
        style={styles.input}
        placeholder='e.g. John Doe'
        onChangeText={(val) => setName(val)}
        />
      <Text>Enter age:</Text>
      <TextInput 
        keyborardType='numeric' #키보드 판 숫자만 나옴
        style={styles.input}
        placeholder='e.g. 20'
        onChangeText={(val) => setAge(val)}
        />

        <Text>name : {name} , age : {age} </Text>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input : {
    borderWidth: 1,
    borderColor:'#777',
    padding:8,
    margin:10,
    width: 200,
  }
});

TextInput 사용하여 컴포넌트 추가 후 사용한다.

attibute value 란에는 값을 넣도록 하고

 

onChangeText 이벤트 : 값이 바뀔때마다 val 값이 바뀌도록 설정 

multiline : TextInput 태그 내에서 줄바꿈 가능함

placeholder : 미리 텍스트 설정

keyborardType='numeric' : 해당 input 사용시 키보드 판 숫자만 나옴

 

 

 

 

 

 

 

 

참조사이트

 

https://reactnative.dev/docs/textinput

TextInput · React Native