时间戳

首页 > 解决方案 > 使用 React Native 上 ScrollView 中的 onScroll 事件更新值

react-native - 使用 React Native 上 ScrollView 中的 onScroll 事件更新值

问题描述

我正在尝试更新/获取 ScrollView 中的值，如下代码：

<SafeAreaView style={styles.container}>
  <ScrollView
    contentContainerStyle={{ flexGrow: 1 }}
    style={styles.scrollView}
    onScroll={(event) => {
      const currentOffset = event.nativeEvent.contentOffset.y;
      urlx = currentOffset > 100 ? url1 : url2;
      log(urlx);
    }}
  >
    <Text>{urlx}</Text>
  </ScrollView>
</SafeAreaView>;

当滚动事件发生时，文本不会更新为新的 urlx 值。

如何从文本强制执行此更新？

标签： react-native

解决方案

只需将 urlx 置于组件的状态：

const [urlx, setUrlx] = useState()

然后像这样更新urlx：

<SafeAreaView style={styles.container}>
  <ScrollView
    contentContainerStyle={{ flexGrow: 1 }}
    style={styles.scrollView}
    onScroll={(event) => {
      const currentOffset = event.nativeEvent.contentOffset.y;
      urlx = currentOffset > 100 ? url1 : url2;
      setUrlx(urlx) // here
    }}
  >
    <Text>{urlx}</Text>
  </ScrollView>
</SafeAreaView>;

您必须使用useState的原因是因为在状态更新时，react 会使用新值更新您的组件

推荐阅读