React Native - 6. Shadow, Input handling, Alert ...

Shadow

shadow와 관련된 property는 5가지가 있다. 

 

- shadowColor : Shadow의 색깔

- shadowOffset : Shadow의 크기  

- shadowRadius : Shadow가 blur되는 범위를 지정

- shadowOpacity : Shadow의 opacity

 

- elevation : Shadow property는 원래 IOS 에만 적용되는 Property. elevation을 통해 shadow를 적용할 수 있다. 다만 IOS 처럼 불균등한 Shadow는 불가능하다. 하려면 react-native-shadow 컴포넌트를 이용하자.

 

Properties for Shadow

 

elevate로 지정된 Shadow

Input Handling

input을 입력하게 되는 경우, Keyboard api가 자동으로 등장한다. 근데 이제 입력을 종료하려고 Input 영역이 아닌 다른 영역을 클릭했을 떄 Keyboard가 제거되어야 한다. 이를 위해 TouchableWithoutFeedback 컴포넌트를 화면 전체에 감싼 후 해당 영역의 OnPress시 Keyboard.dismiss를 넣어준다. 

 

이런 식으로..

 

모든 Input은 String으로 들어오기 때문에, regex를 이용하여 Validation 해주어야 한다. 휴대폰에서 숫자 자판만 나왔다고 해서 숫자만 입력할 수 있는건 아니기 때문이다. (ex - 복붙) 그럴 때 Malformed data가 전송되면 서버의 오류를 발생시킬 수 있기 때문에..

 

Alert

경고창을 띄우기, 경고창의 스타일을 지정할 수 있고, 확인버튼 이후 동작도 명시할 수 있다. 

인자는 제목, 내용, Style 순 

Fonts

현재는 expo 에서 사용하는 방법만을 작성해놓겠다. 그치만 애는 font-weight를 지정할 수 없어 나중에는 react-native로 업데이트가 필수적이다.

 

설치된 폰트를 가져오는 방식

폰트를 가져오기 위해서 expo-font 라이브러리를 이용한다. 

Font.loadAsync 를 이용하여 폰트를 Async 하게 가져온다. 

가져오기 전에 Pre-render되어 폰트가 없는데 해당 폰트로 설정하라고 하는 에러가 발생하는 것을 방지하기 위해 

font가 Loading이 되지 않을 시 AppLoading 컴포넌트를 사용하게 한다. 

이 떄 인자로는 startAsync -> Font.loadAsync Promise를 반환하는 함수를 입력하며

onFinish 에는 load 되엇을 때 어떤 동작을 실행시켜주는지를 추가시켜

state를 변경시키는 방식으로 구성한다.(이게 최선인지는 다시 확인해봐야 할 거 같음)

 

Global Font

CSS가 아니기 때문에 style이 Cascade 되지 않는다. 그래서 2가지 방법을 사용한다.

1. font-family가 지정되어있는 Custom Text Component를 만들어서 사용한다 -> 하게되면 이게 나을 것 같다. 

2. StyleSheet를 만들어서 사용한다.

 

근데 솔직히 둘 다 맘에 들지 않는다. 어떻게 해야 할지 잘 모르겠음. 다른 패키지를 사용해봐야겠다.

 

Using Local Image

로컬 이미지 사용하기

이미지의 크기와 resize 관련된 방법은 Image 컴포넌트 안에 넣어주고, View에서 Border나 Shadow와 같은 효과를 넣어준다. 

만약 웹 이미지를 사용한다면 source 영역에 uri라는 property를 갖는 object를 넣어주어 uri를 지정해주면 된다. 

웹에서 가져온 경우엔 width와 height를 직접 px 단위로 명시해주어야 한다.

fadeDuration property 는 이미지가 처음 등장할 때 Fade효과로 등장하는데 duration을 얼마로 정하느냐에 관한 것이다.