如何实现React Native ScrollView滚动与state的双向联动？

要实现手动滚动ScrollView时更新myValue，同时保留原有的状态变化控制滚动的功能，需要处理滚动事件监听和避免循环触发两个核心点，具体实现如下：

步骤1：新增状态标记程序触发的滚动 #

添加一个状态区分代码触发的滚动和用户手动滚动，防止循环更新：

const [myValue, setMyValue] = useState();
const scrollViewRef = useRef();
// 标记是否是代码触发的滚动，避免手动滚动逻辑被触发
const [isProgrammaticScroll, setIsProgrammaticScroll] = useState(false);

步骤2：给ScrollView绑定滚动事件 #

给ScrollView添加onScroll事件和scrollEventThrottle（控制事件触发频率，避免性能问题），在滚动时根据x轴位置更新myValue：

<ScrollView
    style={styles.optionsContainer}
    horizontal={true}
    ref={scrollViewRef}
    scrollEventThrottle={16} // 约60帧每秒的频率触发，平衡性能与精度
    onScroll={(event) => {
        // 如果是代码触发的滚动，跳过手动更新逻辑
        if (isProgrammaticScroll) {
            setIsProgrammaticScroll(false);
            return;
        }
        const scrollX = event.nativeEvent.contentOffset.x;
        // 根据滚动位置判断对应的myValue区间，阈值需根据实际View宽度调整
        if (scrollX < 100) {
            setMyValue(12); // 取对应区间内的任意值，比如中间值
        } else if (scrollX >= 100 && scrollX < 350) {
            setMyValue(37);
        } else if (scrollX >= 350) {
            setMyValue(62);
        }
    }}
>
    {/* 你的各个View内容 */}
</ScrollView>

步骤3：修改原有useEffect，标记程序滚动 #

在原有的useEffect中，触发滚动前标记为程序触发的滚动，避免手动滚动逻辑被误触发：

useEffect(() => {
    if (!scrollViewRef.current) return;
    
    setIsProgrammaticScroll(true); // 标记是代码触发的滚动
    if (myValue < 24) {
        scrollViewRef.current.scrollTo({ x: 0, y: 0, animated: true });
    } else if (myValue > 24 && myValue < 50) {
        scrollViewRef.current.scrollTo({ x: 190, y: 0, animated: true });
    } else if (myValue >= 50 && myValue < 75) {
        scrollViewRef.current.scrollTo({ x: 480, y: 0, animated: true });
    }
}, [myValue]);

关键注意点 #

• 滚动阈值（比如scrollX < 100）需要根据你每个View的实际宽度、间距调整，确保滚动到对应View时能触发正确的myValue更新。
• 给myValue设置的数值要落在之前定义的区间内，保证双向联动的一致性。

内容的提问来源于stack exchange，提问作者Myrmelo