最終效果
實現原理
主動滾動區觸發滾動事件，原生監聽滾動值的變化，并用動畫的方式實時同步到跟隨滾動區
技術要點
-
使用 Animated.ScrollView
-
使用動畫變量
const scrollY = useRef(new Animated.Value(0)).current; -
主動滾動觸發 onScroll，用 Animated.event 實現原生綁定
onScroll={Animated.event([{nativeEvent: {contentOffset: { y: scrollY },},},],{ useNativeDriver: true })} -
跟隨滾動
transform: [{ translateY: Animated.multiply(-1, scrollY) }],
范例代碼
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) => (<Viewkey={item}style={{width: 60,height: 100,backgroundColor: colors[index % 5],}}/>))}</>);};return (<View style={styles.root}><View style={styles.leftLayout}><Animated.Viewstyle={{width: 60,transform: [{ translateY: Animated.multiply(-1, scrollY) }],}}>{viewList()}</Animated.View></View><View style={styles.rightLayout}><Animated.ScrollViewshowsVerticalScrollIndicator={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,},
});
