React Native中如何通过ScrollView的onScroll事件更新Text内容

React Native 组件仅在状态（state） 或 props 变更时才会触发重渲染。你当前直接修改普通变量urlx的赋值，不会触发组件的重新渲染逻辑，因此<Text>组件始终显示初始化时的urlx值，控制台打印正确是因为变量本身的值确实更新了，只是没有同步到UI层。

以主流的函数组件开发为例，需要将urlx声明为React状态，通过状态更新方法触发UI重绘，同时建议配置scrollEventThrottle属性控制onScroll的触发频率，保证更新流畅：

import { useState } from 'react';
import { SafeAreaView, ScrollView, Text, StyleSheet } from 'react-native';

// 组件内部逻辑
const YourComponent = () => {
  // 将urlx声明为响应式状态，初始值可根据需求调整
  const [urlx, setUrlx] = useState(url2);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={{ flexGrow: 1 }}
        style={styles.scrollView}
        // 配置onScroll每16ms触发一次，适配60帧刷新率，可根据需求调整数值
        scrollEventThrottle={16}
        onScroll={(event) => {
          const currentOffset = event.nativeEvent.contentOffset.y;
          const newUrlx = currentOffset > 100 ? url1 : url2;
          // 调用状态更新方法修改值，触发组件重渲染
          setUrlx(newUrlx);
          console.log(newUrlx);
        }}
      >
        <Text>{urlx}</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  scrollView: {
    width: '100%'
  }
})

如果你使用的是类组件，对应将urlx声明在this.state中，修改时调用this.setState({urlx: newUrlx})即可达到同样效果。

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