TIL: RN | ScrollView, FlatList - 221013

Lumpen·2022년 10월 13일

TIL reactnative

TIL

목록 보기

156/244

iOS 시뮬레이터에서는 마우스로 스크롤이 안되는 것 같다
그래도 scrollToEnd()같은 함수는 작동

ScrollView

스크롤 영역을 지정하는 react-native 태그
높이를 따로 안먹고 지정된 영역에 풀로 차는 것 같다
-> style={{ flex: 1 }} 속성이 먹지 않고 외부에 View 로 감싸서 해결

작동이 이상할 때

스크롤 동작이 이상할 때

한참 뒤에야 움직이거나 버벅일 때
React Native 에서 ScrollView 의 스크롤이 제대로 작동하지 않을 때
터치 영역이나 스크롤 영역이 겹쳐있지 않은지 확인해보아야 한다
TextInput 등이 내부에 존재하는 경우
스크롤 옵션을 해제하는 등의 작업을 해주어야 제대로 동작한다
움직여야 할 곳에서 멈출 때
ScrollView 에 padding 값을 주면 움직이지 않는 것처럼 보일 수 있다
ScrollView 를 사용하는 곳에 padding 이 필요하다면
내부 영역 최상단 또는 내부 영역을 View 로 감싼 곳에 padding 을 주어 사용한다

혹은 TouchableOpacity 로 감싸져 있는지 잘 봐야한다

column 2줄


        <ScrollView
          contentContainerStyle={{
            flexDirection: 'row',
            flexWrap: 'wrap',
          }}
        >
          {SEARCH_WORDS.map((item, index) => {
            return (
              <View key={index} style={{ width: '50%', flexDirection: 'row' }}>
                <Text>{item}</Text>
                <Text>X</Text>
              </View>
            );
          })}
        </ScrollView>

ScrollView 에

 contentContainerStyle={{
            flexDirection: 'row',
            flexWrap: 'wrap',
          }}

속성을 주고
자식 컴포넌트에 width: '50%' 을 준다..ㅎ

button click issue (keyboard)

react native 에서 scroll view 를 사용하고
배경에 Keyboard.dismiss() 를 주었을 경우
input 버튼을 클릭하려면 2번 press 를 해야하는 이슈가 생긴다

ScrollView 속성 중 keyboardShouldPersistTaps 속성을
'handled' 로 주면 한 번에 클릭 가능..ㅎ

상위의 모든 ScrollView 에 keyboardShouldPersistTaps 속성을 주어야 한다

scrollToEnd()

ScrollView에 ref를 주면 ref.current.scrollToEnd()를 사용할 수 있다

ScrollView의 onContentSizeChange 속성에 콜백함수로 ref.current.scrollToEnd({ animated: true }) 실행

ScrollView의 하단부로 이동한다

animated: true 옵션을 주면 부드럽게 동작한다

바닥 영역 감지

const timer = React.useRef<NodeJS.Timeout | null>(null);
const [scrollViewHeight, setScrollViewHeight] = React.useState(0);
const [isBottom, setIsBottom] = React.useState(false);
const isCloseToBottom = (nativeEvent: NativeScrollEvent) => {
      return (
        nativeEvent.contentSize.height <=
        scrollViewHeight + nativeEvent.contentOffset.y
      );
};

const onScrollViewLayout = (event: LayoutChangeEvent) => {
  setScrollViewHeight(event.nativeEvent.layout.height);
};


return (
	 <ScrollView
          onLayout={onScrollViewLayout}
          onScroll={({ nativeEvent }) => {
            if (!timer.current) {
              timer.current = setTimeout(() => {
                timer.current = null;
                if (isCloseToBottom(nativeEvent)) {
                  setIsBottom(true);
                }
            }, 200);
          }
        }}
      >
)