-
React Native 2022‧12‧04
react native - Swipeable 의 속성과 메소드들
react-native-gesture-handler 를 설치한 뒤 Swipeable 로 스와이핑 버튼을 만들어서 쓰고 있다. 그 중 몇가지 쓰는 것들을 적어 놓으려고 한다. 이렇게 예시를 작성하고 설명드리면, renderRightActions : 오른쪽에서 스와이프 했을 때 보여질 컴포넌트이다. 위 예제처럼 컴포넌트 변수명을 바로 넣어도 되고 값을 넘겨서 사용할 경우에는 예를 들어 renderRightActions={ () => <RightComp aaa={ aaa }/> } 이렇게 사용하기도 한다. […]
-
React Native 2022‧12‧04
react native - Warning: Functions are not valid as a React child. This may happen if you return a Component instead of
from render. Or maybe you meant to call this function rather than return it. 오류 에러는 아니지만 Warning 으로 떠서 원인을 찾으려고 메시지를 읽고 찾아내려니 상당히 불친절한 안내로 원인을 사실 찾기 힘들다. 그래서 검색도 해보고 내가 작업한 내용을 역학조사를 해봤다. 대부분 검색 내용들은 라우터 역할을 한 곳에서 수정하라고 한다. (링크) 하지만 나는 props를 넘겨줘야 하는 구조의 엘리먼트로 저 방식이 안될 뿐더러 갑자기 왜 저것이 문제이지? 하면서 내가 작업한 것들을 되짚어 […]
-
React Native 2022‧11‧26
react native - TextInput 에 입력 또는 수정 disable 처리
이런 식으로 처리하면 기본적으로 입력란을 터치해도 입력 또는 수정이 되지 않는다.하지만 UX 관점에서 시각적인 차이가 없기 때문에 아래처럼 조금 더 넣어서 처리했다. 이렇게 해주면 setCheckRestTimer(true) 를 해주면 TextInput이 활성화 되면서 배경이 흰색으로 보이고 setCheckRestTimer(false) 를 해주면 TextInput이 비활성화 되면서 짙은 회색으로 변한다.
-
React Native 2022‧11‧20
react native - Flatlist 의 하위 아이템 중 원하는 아이템으로 스크롤 시키기 (scrollToIndex)
Flatlist 를 이용하면 배열로 된 데이터를 이용해서 반복적인 뷰를 만들 수 있다.Flatlist 외부에서 버튼이나 함수를 통해 원하는 아이템이 있는 곳으로 스크롤이 필요할 때가 있다. 상단에 const flatListRef = useRef(); 를 선언하고Flatlist에 ref={flatListRef}를 추가한다. 초기 이동이 필요할 경우 initialScrollIndex 속성에 번호를 넣어주면 된다. useEffect나 함수에서 flatListRef.current.scrollToIndex({animated: true, index: 2}); 이런식으로 index의 값에 이동시키고 싶은 아이템 번호를 […]