时间戳

首页 > 解决方案 > 反应原生：更改滚动滚动视图上的样式属性

react-native - 反应原生：更改滚动滚动视图上的样式属性

问题描述

我在滚动视图（flex：1）上方有一个视图（flex：0）。当我在滚动视图（event.nativeEvent.contentOffset.y > 0）上向下滚动时，我想更改顶视图的边框底部颜色。

当前代码：


const Screen = (props) => {
  // ...

  const [bottom, setBottom] = useState(0);

  const scrollE = (event) => {
    setBottom(event.nativeEvent.contentOffset.y > 0 ? 1 : 0);
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 0, borderBottomWidth: bottom, borderBottomColor: 'black' }}>
        <Text>HEADER</Text>
      </View>
      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} onScroll={scrollE} scrollEventThrottle={16}>
        // ... scrollview content
      </ScrollView>
    </View>
  );
};

滚动时似乎我的屏幕在闪烁。我认为这与每次我的边界状态发生变化时的重新渲染有关。我尝试使用 use ref 将其更改为此，但这也不起作用：

const Screen = (props) => {
  // ...

  const bottom = useRef(0);

  const scrollE = (event) => {
    bottom.current = event.nativeEvent.contentOffset.y > 0 ? 1 : 0;
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 0, borderBottomWidth: bottom.current, borderBottomColor: 'black' }}>
        <Text>HEADER</Text>
      </View>
      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} onScroll={scrollE} scrollEventThrottle={16}>
        // ... scrollview content
      </ScrollView>
    </View>
  );
};

我不需要调整大小的“粘性”标题，我只希望更改边框底部宽度。

标签： react-native

解决方案

我会用动画 API 来做，希望这会有所帮助

 const Screen = (props) => {
  const scrollY= new Animated.Value(0)

  const scrollE = (event) => {
   Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }],{ useNativeDriver: true })
  };

const bottom = scrollY.interpolate({
    inputRange: [0, 10],
    outputRange: [1, 0],
})

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 0, borderBottomWidth: bottom, borderBottomColor: 'black' }}>
        <Text>HEADER</Text>
      </View>
      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} onScroll={scrollE} scrollEventThrottle={16}>
        // ... scrollview content
      </ScrollView>
    </View>
  );
};

推荐阅读