리액트 네이티브 - 이벤트

press 이벤트

onClick 과 비슷한 이벤트

TouchableOpacity 컴포넌트에서 설정할 수 있는 Press 이벤트의 종류는 4가지임

onPressIn : 터치가 시작될때 항상 호출

onPressOut : 터치가 해제될 때 항상 호출

onPress : 터치가 해제될때 onPressOut 이후 호출

onLongPress : 터치가 일정 시간 이상 지속되면 호출

import React from 'react';
import { TouchableOpacity, Text } from 'react-native'

const EventButton = () => {
    const _onPressIn = () => console.log('Press In!!\n');
    const _onPressOut = () => console.log('Press Out!!\n');
    const _onPress = () => console.log('Press !!\n');
    const _onLongPress = () => console.log('Long Press !!\n');


    return (
        <TouchableOpacity
            sytle={{
                backgroundCloer: '#f1c40f',
                padding: 16,
                margin: 10,
                borderRadius: 8,
            }}

            onPressIn={_onPressIn}
            onLongPress={_onLongPress}
            onPressOut={_onPressOut}
            onPress={_onPress}
        >
            <Text style={{color: 'white', fontSize: 24}}>Press</Text>
        </TouchableOpacity>
    );
};

export default EventButton;

import React from 'react';
import {View} from 'react-native';
import EventButton from './components/EventButton';

const App = () => {
    return (
        <View
            style={{
                flex: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <EventButton /> 

        </View>
    );
};


export default App;

 

 

change 이벤트

change는 값을 입력하는 TextInput 컴포넌트에서 많이 사용된다.

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

const EventInput = () => {
    const [text, setText] = useState('');
    const _onChange = event => setText(event.nativeEvent.text);
    return(
        <View>
            <Text style = {{ margin: 10, fontSize: 30}}>text: {text}</Text>
            <TextInput
                style={{ borderWidth: 1, padding: 10, fontSize: 20}}
                onChange={_onChange}
            />
        </View>
    );
};

export default EventInput;

TextInput 

import React from 'react';
import {View} from 'react-native';
import EventButton from './components/EventButton';
import EventInput from './components/EventInput';

const App = () => {
    return (
        <View
            style={{
                flex: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >

            <EventInput />

        </View>
    );
};


export default App;