【ReactNative】Animated.event를 사용해 위로 스크롤했을 때만, 탭이나 로고를 표시한다

스마트폰 앱으로 자주 있는, 위 스크롤했을 때만, 위로부터 탭이라든지 로고가 나오는 구현을 ReactNative로 썼습니다.

참고한 기사
htps : // 레아 ct나치ゔぇ. v / 두 cs / 애니메 d
htps : // hrk ys. bgs포 t. 이 m/2017/07/레아ct-나치ゔぇ아니마치온. HTML
htps : // 코 m / 뻣뻣 / ms / 35b659728 아 953307c040

완성 이미지

완성 코드

import React from 'react';
import {Animated, StyleSheet, Text, ScrollView, Dimensions} from 'react-native';

const TestScreen = () => {
  const scrollY = React.useRef(new Animated.Value(0)).current;

  return (
    <>
      <Animated.View
        style={[
          styles.box,
          {
            transform: [{
              translateY: Animated.diffClamp( Animated.multiply(scrollY, -1), -60, 0)
            }],
          },
        ]}
      >
        <Text style={styles.text}>ロゴ</Text>
      </Animated.View>
      <ScrollView
        contentContainerStyle={{ marginTop: 60 }}
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          {
            useNativeDriver: false,
          },
        )}
      >
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </>
  );
}

const { width } = Dimensions.get('window');

const styles = StyleSheet.create({
  box: {
    position: 'absolute',
    top: 0,
    right: 0,
    zIndex: 10,
    backgroundColor: '#FFF',
    height: 60,
    width: width,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 42,
    fontWeight: 'bold',
  },
});

export default TestScreen;

포인트

얕은 지식으로 해설하므로 흥미있는 분만 봐주세요.

변수 선언

const scrollY = React.useRef(new Animated.Value(0)).current

이벤트 발화

<ScrollView
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    {
      useNativeDriver: false,
    },
  )}
>

스크롤하면 현재 위치에 따라 scrollY의 값이 변경됩니다.
Animated.event([{nativeEvent:{contentOffset:{y:scrollY}}}]])}는 정해진 쓰는 것 같다. 말하는대로 쓴다.
htps : // 레아 ct나치ゔぇ. v / 드 cs / 아니 마테 d # 뱅 d ぃ ん げ げつ s s an d ㅇ
useNativeDriver는 true라고, 스마트 폰에서의 조작성이 오르는 것 같지만 개발 환경 similator에서 에러가 나왔으므로, false로 했다. 아무것도 쓰지 않으면 경고가 나온다.
htps : // 레아 ct나치ゔぇ. v / cs / 아니 마치 온 s # ushin g-te-nachi ゔ ぇ d ri ゔ r

탭 스타일

<Animated.View
  style={{
    position: 'absolute',
    top: 0,
    right: 0,
    transform: [{
      translateY: Animated.diffClamp( Animated.multiply(scrollY, -1), -60, 0)
    }],
  }}
>

절대 위치로 지정한다.
scrollY 의 값에 맞추어 이동하도록 transform 로 위치를 이동한다. Animated.multiply 는 제 1 인수와 제 2 인수의 곱셈을 돌려주기 (scrolly × (-1)) 때문에, 이것을 사용해 스크롤 방향과 값의 정 부를 역전시킨다. Animated.diffClamp는 제 2 인수로 최소값을, 제 3 인수로 최대치를 설정할 수 있으므로, 이것으로 탭의 움직일 수 있는 범위를 지정한다.
htps : // 레아 ct 나치ゔぇ. v / 두 cs / 애니메 d # mu l chi ply

스크롤 옵션

<ScrollView
  contentContainerStyle={{ marginTop: 60 }}
  scrollEventThrottle={16}
>

이 두 가지 옵션은 필수는 아닙니다. contentContainerStyle을 지정하는 것으로, 페이지를 최초로 표시했을 때에, 탭과 컨텐츠가 쓰지 않게 된다.
htps : // 레아 ct 나치ゔぇ. v / cs / sc rot lゔ ぃ
scrollEventThrottle={16}을 지정하는 것으로, 조작성이 오르는 것 같다.