5주차] Modal / Pressable / RefreshControl

Modal

사용법

<View>
    <Modal
        animationType='slide'
        transparent={true}
        visible={modalVisible}
        onRequestClose={()=> {
          Alert.alert('모달창이 닫힙니다.');
          setModalVisible(!modalVisible)
        }}>
        <View>
            <Text>모달모달</Text>
        </View>
    </Modal>
</View>

Props

• animationType : enum('none', 'slide', 'fade') // default : none
  slide : 화면 하단에서 위로 슬라이드됨
  fade : 페이드 인/아웃
  none : 효과없음
• hardwareAccelerated : android (default : false)
  기본창에 대해 하드웨어 가족을 강제할지 여부를 제어
• onOrientationChange : ios ( function)
  모달이 열린 상태에서 화면의 방향이 전환될 경우 호출되는 함수
  initial render에서도 호출됨
• onRequestClose : android, TV에서 required
  하드웨어 back button을 눌릴 때 작동할 함수
  주의! 모달이 열려있을 때 BackHandler이벤트가 동작하지 않음
• onShow
  모달이 열릴 때 한번 호출됨
• presentationStyle : ios, enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')
  아이패드, 혹은 플러스사이즈 모델의 아이폰일 경우 어떻게 표시될지를 나타냄.
  default => transparent가 false일때 fullScreen, true일때 overFullScreen
  
• statusBarTranslucent : android (default: false)
  시스템 상태바 아래로 모달창이 가도록 함
• supportedOrientations : ios
  모달창이 지원하는 방향
  / enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') / default : 'portrait'
  앱의 info.plist에 설정된 UISupportedInterfaceOrientations의 값을 따름
• transparent : default false
• visible : default true

Pressable

TouchableOpacity처럼 자식컴포넌트를 클릭할 수 있게 해줌

<Pressable 
    onPress={onPressFunction}>
    { ({pressed}) => {
            return (
                <Text>{ pressed ? '눌림' : '안눌림' }</Text>
            )
        }

    }
    <Text>I'm Pressable</Text>
</Pressable>

• 동작 플로우
• Pressable의 구조

Props

• android_disableSound : android (default : false)
  true라면 터치 시 안드로이드 시스템 사운드가 나지 않음

• android_ripple : android
  버튼 터치시의 잔물결 효과

• children : JSX 혹은 (isPressed : boolean) : void => {}

• unstable_pressDelay : number
  버튼을 터치했을 때 ~ onPressIn 사이의 대기 시간.

• delayLongPress : number (ms)
  onPressIn과 onLongPress 사이의 시간

• disabled ( default : false)

• hitSlop : number혹은 Rect ({top:0, bottom:0, left: null, right:undefied})
  컴포넌트(엘리먼트) 바깥에서 터치로 감지될 수 있는 추가적인 공간

• onLongPress : (PressEvent) => {}
  onPressIn이후 delayLongPress시간(default500)이 지난 후 호출되는 함수

• onPress : (PressEvent) => {}
  onPressOut 이후 호출됨

• pressRetentionOffset : number 혹은 Rect ( default : { bottom:30, left:20, right:20, top: 20})
  onPressOut이 호출되기 전 터치가 press로 간주되는 추가적인 거리
  (Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered. 뭔말인지..)

• style : ViewStyle

• RippleConfig
  android_ripple에 사용되는 객체

  이름	타입	required	설명
  color	color	x	물결효과의 색상
  borderless	boolean	x	물결효과에 border 포함 여부
  radius	number	x	물결효과의 반지름

RefreshControl

ScrollView와 ListView의 refreshControl prop으로 사용되어 'pull to refresh'를 정의할 수 있습니다.
ScrollView에서 scrollY가 0일때 아래로 당길 경우 onRefresh 이벤트가 호출됩니다.

// 리액트 컴포넌트 바깥에 wait 선언
const wait = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  })
}

// 안쪽에 선언
const [ refreshing, setRefreshing ] = React.useState(false);

const onRefresh = React.useCallback(() => {
  setRefreshing(true);
  wait(2000).then(() => setRefreshing(false));
},[]);

<ScrollView
    refreshControl={
        <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
        />
    }
>
</ScrollView>

• refreshing : required, boolean
  true일 경우 indicator가 돌아감.
• colors : android, Array(color)
  빙빙 돌면서 배열로 주어진 색상이 나타남 ['red','orange','blue']
• enabled : android , boolean
  pull to refresh를 사용할지 여부
• onRefresh : () => {}
  리프레시가 시작될 때 실행되는 함수
  안드로이드
  끌어당긴 후 손가락을 놓아야 onRefresh가 호출됨
  iOS
  끌어당긴 후 놓지 않아도 threadhold 이상으로 당길 경우 호출됨
• progressBackgroundColor : android : color
  인디케이터의 배경색
• progressViewOffset : android : number (default: 0)
  인디케이터가 top으로부터 얼마나 떨어져있는지,
• size : android , enum (RefreshControl.SIZE.DEFAULT, ...LARGE)
• tintColor : ios, color
  인디케이터의 색상
• title : ios, string
  인디케이터 하단에 뜨는 문자열
• titleColor : ios, color