240705_TIL

1. ios에서는 <Text>에서 border radius가 적용되지 않는데 이를 해결하기 위해서는 overflow: “hidden”을 추가로 적용해주면 된다

https://eloquence-developers.tistory.com/147

[React Native] iOS borderRadius 적용되지 않는 이슈

 

 

2. react-native-swiper 라이브러리를 사용하는데 다른 페이지를 갔다가 해당 라이브러리를 사용하는 페이지로 돌아올 경우 슬라이드가 잘려서 보여진다. 아마 마진을 넣어서 그런것 같다(마진이 없다면 정상작동한다)

이렇게 다음 슬라이드가 보이게 된다

https://github.com/leecade/react-native-swiper/issues/1175

image shift by about 1 cm when swiping left or right and shift increase the more we swipe · Issue #1175 · leecade/react-native

다른 경우지만 이걸 보고 참고해서 loadMinimal={true}를 <Swiper>에 추가했더니 해결되었다.

(loadMinimal는 현재 인덱스의 슬라이드만 로드 시켜주는 거라고 하는데 정확히 어떤 기능인지 파악이 안됨)

그런데 안드로이드에서는 이걸 적용시켰더니 첫 이미지가 로드되었다가 보인다.

 

잘리는 것 보다 낫긴한데 깜박거리는 현상이 발생한거라 깔끔하진 않다.

 

 

3. Input 창 입력시 키보드가 생성되면 하단 버튼이 키보드에 가려져서 입력 후에 키보드를 내리고 다음 버튼을 눌러야했다. 터치를 2번 해야하는 작업. 그래서 키보드가 올라올 때 버튼이 키보드 위로 올라오도록 만들었다.

 

1) 먼저 컨텐츠와 버튼을 위아래로 띄우는(justifyContent: 'space-between’가 있는) container영역이 원래는 View 였는데, 이걸 <KeyboardAvoidingView>로 변경했다. 

(KeyboardAvoidingView : 키보드가 나타날 때 패딩 등을 설정할 수 있는 View)

 

2-1) 그리고 속성으로 두가지를 추가해줬는데, behvior과 keyboardVerticalOffset이다.

behavior={'padding'}

behavior의 속성값으로 pading패딩과 하이트는 비슷한데 이전에 하이트를 사용하면서 스크롤 뷰를 동시에 사용할때 키보드가 덜덜거리는 버그가 있어서 패딩을 사용하고자 했다. 그런데 패딩을 사용할 경우 KeyboardAvoidingView의 스타일에 적용했던 paddingBottom이 적용되지 않았다. 그래서 버튼컴포넌트에 따로 마진바텀을 줘서 버튼아래에 간격을 만들었다.

 

2-2)

keyboardVerticalOffset={Platform.OS === 'android' ? 20 : 0}
그런데 안드로이드는 버튼에 마진을 줘도 키보드를 생성하면 항상 키보드에 버튼이 딱 달라붙어있다. 그래서 위와 같이 키보드와 뷰사이의 간격을 줘야한다. 그런데 이 경우 키보드를 다시 내리면 설정한 간격만큼 버튼이 하단에 띄워져있다.

키보드를 생성해도 버튼이 키보드에 가렸는데

 

이제는 키보드 위로 올라옴

 

4. 인증번호 6자리 클릭 시 키보드 내려가도록

const cert = String(watch('cert')).length === 6;

useEffect(() => {
  if (cert) {
    Keyboard.dismiss();
  }
}, [cert]);

<PrimaryButton callback={handleSubmit(onConfirmCert)} disabled={!cert} />