React Native【实战范例】同步跟随滚动

最终效果

实现原理

主动滚动区触发滚动事件,原生监听滚动值的变化,并用动画的方式实时同步到跟随滚动区

技术要点

  • 使用 Animated.ScrollView

  • 使用动画变量

    c 复制代码
    const scrollY = useRef(new Animated.Value(0)).current;
  • 主动滚动触发 onScroll,用 Animated.event 实现原生绑定

    c 复制代码
              onScroll={Animated.event(
                [
                  {
                    nativeEvent: {
                      contentOffset: { y: scrollY },
                    },
                  },
                ],
                { useNativeDriver: true }
              )}
  • 跟随滚动

    c 复制代码
    transform: [{ translateY: Animated.multiply(-1, scrollY) }],

范例代码

c 复制代码
import React, { useRef } from "react";
import { Animated, StyleSheet, View } from "react-native";
const colors = ["red", "green", "blue", "yellow", "orange"];
export default function Demo() {
  const scrollY = useRef(new Animated.Value(0)).current;
  const viewList = () => {
    const array = [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
    ];
    return (
      <>
        {array.map((item, index) => (
          <View
            key={item}
            style={{
              width: 60,
              height: 100,
              backgroundColor: colors[index % 5],
            }}
          />
        ))}
      </>
    );
  };
  return (
    <View style={styles.root}>
      <View style={styles.leftLayout}>
        <Animated.View
          style={{
            width: 60,
            transform: [{ translateY: Animated.multiply(-1, scrollY) }],
          }}
        >
          {viewList()}
        </Animated.View>
      </View>
      <View style={styles.rightLayout}>
        <Animated.ScrollView
          showsVerticalScrollIndicator={false}
          onScroll={Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: { y: scrollY },
                },
              },
            ],
            { useNativeDriver: true }
          )}
        >
          {viewList()}
        </Animated.ScrollView>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  root: {
    width: "100%",
    height: "100%",
    flexDirection: "row",
    justifyContent: "center",
  },
  leftLayout: {
    width: 60,
    backgroundColor: "#00FF0030",
    flexDirection: "column",
  },
  rightLayout: {
    width: 60,
    height: "100%",
    backgroundColor: "#0000FF30",
    marginLeft: 100,
  },
});
相关推荐
朝阳392 小时前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
冰冷的bin5 小时前
【React Native】自定义倒计时组件CountdownView
react native
朝阳3910 天前
React Native【实用教程】(含图标方案,常用第三库,动画,内置组件,内置Hooks,内置API,自定义组件,创建项目等)
react native
朝阳3912 天前
React Native【详解】动画
react native
朝阳3913 天前
React Native【详解】内置 API
react native
xx240613 天前
React Native学习笔记
笔记·学习·react native
朝阳3913 天前
React Native【实战范例】弹跳动画菜单导航
react native
草明14 天前
解决: React Native iOS webview 空白页
react native·react.js·ios
@PHARAOH14 天前
WHAT - React Native 开发 App 从 0 到上线全流程周期
javascript·react native·react.js