react_native ActivityIndicator/Button/FlatList

ActivityIndicator 란?

        ●  로딩바를 표시하는 컴포넌트이다. 

 

공식문서 도우미: https://reactnative.dev/docs/activityindicator

ActivityIndicator · React Native

props 

 

animating    ( Type : bool  )

    - true 일 때 indicator 활성화

    - false 일 때 indicator 비활성화 ( IOS는 false 일 때 일시정지 상태로 렌더링 된다.  Android는 비활성화        한다. )

 

size   (  Type  :  enum('small', 'large')  )
     - enum 유형이다.  작은 or 큰따옴표에 문자열을 입력하면 된다.

 

color  (  Type : "색상명" )

     - 로딩바의 색깔을 표시합니다.

 

hidesWhenStoppend   ( Type : bool)
     IOS 만 포함된다.

     - true 일때 animating를 숨긴다.

     - false 일때 animating를 표시된다.

 

ex)

 

 

Button 란?

       ●  모든 플랫폼에서 렌더링되어야 하는 기본 버튼 구성 요소 이다.

       ●  TouchableOpacity 또는 TouchableWithoutFeedback 을 사용하여 자신만의 버튼을 만들 수 있다.

 

공식문서 도우미 : https://reactnative.dev/docs/button

Button · React Native

 

props

 

onPress  (  Type : function(PressEvent)  )
   - 사용자가 버튼을 탭할 때 호출되는 핸들러 입니다.

 

title   ( Type : string )

   - 버튼 내부에 표시 할 텍스트입니다. Android에서는 주어진 제목이 대문자 형식으로 변환됩니다.

 

accessibilityLabe  ( Type : string )

   - 시각 장애인 접근성 기능에 대해 표시 할 텍스트입니다.

 

color ( Type : "색상명" )

   -  IOS 는 텍스트 색상을 지원합니다.

   -  Android 는 배경 색상을 지원합니다.

 

disabled   ( Type : boolean )

   - true 경우이 구성 요소에 대한 모든 상호 작용을 비활성화합니다.
   - 기본 false

 

touchSoundDisabled   ( Type  :  boolean  )

   - true 터치시 시스템 사운드를 재생하지 않습니다.

   - 기본 false 입니다.

 

ex)

 

FlatList 란?

      ● 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 RN 컴포넌트입니다.

      ● JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 react-native에서
          많이 쓰이는 컴포넌트 입니다.

 

공식문서 도우미 : 

https://reactnative.dev/docs/flatlist 

FlatList · React Native

 

<FlatList> 와 ScrollView는 주로 함께 사용되는데 사용용도에 차이점이 있다고 합니다.

 

<ScrollView> 는 데이터가 화면에 벗어났을때 Scroll을 생성하여 사용자와의 상호작용(swipe, 스와이프)을 통해 벗어난 부분을 볼 수 있게 해주는데 목적이 있다. 
출력해야 하는 데이터가 고정적이고 데이터양이 많지 않을 경우 적합한 컴포넌트입니다.

 

<FlatList>는 한번에 모든 데이터를 렌더링하지 않고 화면에 보여지는 부분만 렌더링한다.

 

props

 

data

  - 데이터를 받는 위치 이다.

 

renderItem

  - data에서 항목을 가져와 렌더링 한다. (컴포넌트로 정의한다.)

 

extraData

  - 목록을 다시 렌더링하게 지시하는 마커 속성입니다.

 

ketExtractor

  - Key 와 같은 기능이다. 지정된 index에서 지정된 항목의 고유 키를 추출 하는데 사용한다.

 

ListEmptyComponent

  - 데이터가 비어있을때 렌더링 되는 컴포넌트입니다.

 

ListHeaderComponent

   - 데이터를 받아와 출력하는 곳 위에 표시한다.