react_native Modal / Pressable / RefreshControl

개요

    - Modal : 특정 이벤트에서 새창을 띄었을때 원래 하던 작업을 계속 이어갈 수 있게 해놓은 것이 모달리스이다.

                 특정 이벤트에서 확인하거나 특정 이벤트를 날려주지 않으면 원래 하던 작업을 계속 이어갈수 없는
                 새창을 모달이라고 한다.  ex) 팝업창

    - Pressable : touchableopacity 와 같이 버튼의 역할을 하지만, 더 다양한 press 단계를 추적할 수 있다.

    - Refreshcontrol  :  ScrollView 또는 ListView 내에서 화면을 끌어내려서 새로 고침을 추가하는데 사용된다.

 

 

 

import React, { useState } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
        onShow={() =>{
          Alert.alert("Modal has been open.");
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

 

Modal

https://reactnative.dev/docs/modal

Modal · React Native

 - Props

    -  visible [자료형 : Boolean ]     :  true , false 로 설정하며 보이게 또는 안보이도록 설정하기 위해서 사용됨

    -  transparent   [자료형 : Boolean ]   :   true인경우 <Modal /> 의 뒷 배경이 없는 transparent 상태를 가지게됨.
       불투명 효과 적용시 배경값을 불투명하게 적용하여 사용한다.
       내부 콘텐츠의 크기를 작게할 경우 가려진 콘텐츠가 불투명하게 드러나게 됨
    -  animation [자료형 : ENUM ('none', 'slide', 'fade') ]     default : none
:   Modal을 보이거나 사라질 때 간단한 애니메이션을 적용한다.

none   :  애니메이션 효과 없이 적용됨
slide    : 하단에서부터 이동하는 효과
fade    : 서서히 나타나는 FadeInOut 효과 

 

     - onRequestClose  [ function ]   :   모달을 닫는 경우 실행될 콜백 함수를 등록한다.  

     - onShow  [ function ]  : 모달이 보이게되면 실행될 콜백함수를 등록함.

 

 

 

Pressable

https://reactnative.dev/docs/pressable

Pressable · React Native

 

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

const App = () => {
  const [timesPressed, setTimesPressed] = useState(0);

  let textLog = '';
  if (timesPressed > 1) {
    textLog = timesPressed + 'x onPress';
  } else if (timesPressed > 0) {
    textLog = 'onPress';
  }

  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => {
          setTimesPressed((current) => current + 1);
        }}
        style={({ pressed }) => [
          {
            backgroundColor: pressed
              ? 'rgb(210, 230, 255)'
              : 'white'
          },
          styles.wrapperCustom
        ]}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Press Me'}
          </Text>
        )}
      </Pressable>
      <View style={styles.logBox}>
        <Text testID="pressable_press_console">{textLog}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  text: {
    fontSize: 16
  },
  wrapperCustom: {
    borderRadius: 8,
    padding: 6
  },
  logBox: {
    padding: 20,
    margin: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9'
  }
});

export default App;

 

 - Props

 

      -    onPress

               손가락으로 터치후에 때면 이벤트 발생

      -    onPressIn

               손가락으로 터치하면 이벤트 발생

      -    onPressout 

               손가락으로 터치 때면 이벤트 발생

      -    children

               아래코드는 pressed 는 pressable 를 통해 터치를 하고있는지 true false를 준다. 터치를 하고있으면
                Pressed! 터치를 하고 있지 않을시에는 Press Me 를 띄운다.

 {({ pressed }) => (

          <Text style={styles.text}>

            {pressed ? 'Pressed!' : 'Press Me'}

          </Text>

)}

           

 

 

RefreshControl 

      https://reactnative.dev/docs/refreshcontrol

RefreshControl · React Native

 

 

 

 

   - Props

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

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

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

 

          - onRefresh

                  새로고침이 활성화 될때 실행된다.    ( type : function )

          - refreshing(필수)

                  새로 고침을 활성화 할지 표시한다.