ReactNative-UI

BuDuDak·2021년 9월 2일
react native
1

📌 ReactNative 에서의 UI

🕹 style

ReactNative 의 스타일은 StyleSheet.create 메서드를 사용해 컴포넌트에 style props를 전달하는 방식을 사용한다.

따라서, 문법 규칙이 자바스크립트 object 작성시와 동일하다.

예를 들어 글씨 사이즈와 색을 바꿔주는 스타일을 적용 시키려 할때, 

const styles = StyleSheet.create({
  MyFont: {
    fontSize: 30,
    color: 'red'
  }
})

StyleSheet.create 로 만든 MyFont 를

<View>
  <Text style={styles.MyFont}> 안녕하세요 </Text>
</View>

형식으로 전달해주면 된다.

❗️ 기존(css) 방식과의 차이점

// CSS
display: flex;
justify-content: space-around;
font-weight: bold;
font-size: 12px;
flex: 1 1 auto;

// ReactNative
display: 'flex',
justifyContent: 'space-between',
fontWeight: 'bold',
font-size: 12,
flexGrow: 1,
flexShrink: 1,
flexBasis: 'auto',

  • 속성명을 작성할때, 단어구분을 카멜케이스로 구분한다.

  • 속성값의 경우에는 문자열 형식으로 작성

  • 스타일 속성 구분을 , 로 구분한다.

  • px과 같은 단위 생략, 적용되는 단위는 대상 OS마다 다르다.
    (ios는 논리픽셀, android는 DP)

  • 축약형 사용이 불가능하다.

  • 스타일 적용 우선순위가 적용방식에 따르지않고, 가장 나중에 전달되는 스타일이 우선순위가 높다.

  • display 속성 값이 flex 와 none 두개뿐이다.

  • flexDirection 의 기본값이 column 이다.

🕹 tag

html의 태그들처럼 기본적으로 제공하는 컴포넌트들이 있다.

View

div 와 유사하다, 중첩이 가능하다.
하지만, margin/padding/border 박스모델 속성적용이 불가하다.

SafeAreaView

기기의 안전한 영역 경계 내, 콘텐츠를 렌더링, 자동으로 padding을 적용
(기기의 코너부분, 베터리표시 등의 도구모음과 영역이 겹치지 않게)
페이지의 최상위 Wrapper 컴포넌트로 많이 사용

ScrollView

내부 컨텐츠에 따라 자동적으로 스크롤 생성이 되지 않는 ReactNative에서
스크롤이 필요할때 사용,
position: fixed 가 불가능하지만 ScrollView를 사용해야만 스크롤이 생성되기에 고정된 UI 구현이 가능하다.

KeyboardAvodingView

키보드가 올라올 경우, 컨텐츠가 가려지는 문제를 해결하는 컴포넌트
behavior props로 회피 방법 설정 가능
input 사용 컴포넌트에서 필수적

FlatList

목록이 길어지면 자동적으로 내부에 ScrollView적용,
아래로 당겼을시 refresh 기능을 props로 설정 가능

Text

텍스트를 표현하기 위한 컴포넌트, 중첩이 가능하다.

<View>
	<Text style={{fontWeight:'bold'}}>
    	입력된
    	<Text>텍스트</Text>
    </Text>
</View>

TextInput

텍스트 입력을 위한 컴포넌트

Touchable

다양한 Touchable 컴포넌트가 있지만, 앱 내 터치요소 통일성을 해칠 가능성이 있기에,
적절한 하나의 Touchable 컴포넌트를 기본으로 사용하는걸 추천.

  • button
    기본적 버튼 컴포넌트이지만 스타일링이 불가능해 활용도가 떨어짐

  • TouchableHighlight
    터치 시 하이라이트 발생, 내부에 하나의 자식컴포넌트가 필수/둘 이상의 자식요소라면 그룹화(<></>) 필요

  • TouchableOpacity
    터치 시 투명도 값이 적용, 내부에 여러 자식컴포넌트 가능

Image

이미지 표현에 사용되는 컴포넌트, source props에 경로 전달 필요

<View>
  <Image 
   source={{url:'이미지주소'}}
  />
</View>

❗️ 앱 내부 이미지파일 불러올땐 require , 네트워크 이미지/데이터 불러올땐 이미지의 사이즈영역 확보 필요

ImageBackground

배경이미지를 넣을때 사용

<View>
  <ImageBackground source={{uri: '이미지주소'}}>
  	<Text> 안녕하세요 </Text>
  </ImageBackground>
</View>

Modal

기존 모달창과 같이 작동, 기존 레이아웃 위에 노출
항상 뷰포트 전체 크기값을 가짐, 설정 필요

🕹 props

ReactNative 에는 style props 외에 UI렌더링에 영향을 주는 props들이 많다.

numberOfLines,ellipsizeMode

텍스트의 말줄임 처리를 Text 컴포넌트에 numberOfLines / ellipsizeMode 를 props로 주어 사용한다.

  • numberOfLines 에 말줄임이 될 라인수를 전달

  • ellipsizeMode 에 'head','middle','tail','clip' 값을 주어 말줄임 방식을 조정
    head 는 글의 첫 부분, middle은 가운데, tail은 끝, clip은 '...' 같은 줄임표시 없이 텍스트 자르기

보통 tail 형식이 보편적으로 사용되는것 같다. (기본값이 tail이다)

hitSlop

터치영역을 눈에 보이는 영역보다 확장할 경우, padding을 정교하게 계산하여 사용하기 어렵기에
주변 요소의 렌더링에 영향을 주지않고 터치영역만 증가시킬수있다.

<View>
  <TouchableHighlight hitSlop={{top:10,right:10,bottom:10,left:10}}>
  	<Text> 버튼 </Text>
  </TouchableHighlight>
</View>

contentContainerStyle

ScrollView 를 사용할 때, 컨텐츠 내용이 부족해도 ScrollView 만큼 영역을 확보해야하는경우, flexGrow: 1 을 사용해 확보가 가능하다.

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
	<View>
		<Text>확보 영역</Text>
	</View>
</ScrollView>

👍 참고

profile
BuDuDak
이전 포스트

ReactNative-FlexBox

0개의 댓글