React Native Pressable

정의된 자식에 대한 다양한  Press 상호 작용 단계를 감지할 수 있는 핵심 구성 요소

 

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

const Button = props => {
  return (
    <Pressable
      style={{padding: 10, backgroundColor: '#2598eb'}}
      onPressIn={() => {
        console.log('Press In');
      }}
      onPressOut={() => {
        console.log('Press Out');
      }}
      onPress={() => {
        console.log('Press');
      }}
      onLongPress={() => {
        console.log('Long Press');
      }}
      delayLongPress={3000}
      pressRetentionOffset={{button: 50, left: 50, right: 50, top: 50}}
      hitSlop={50}>
      <Text style={{padding: 10, fontSize: 30}}>{props.title}</Text>
    </Pressable>
  );
};

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#fff',
        alignItems: 'center',
      }}>
      <Button title="Pressable"></Button>
    </View>
  );
};
export default App;