Question

我正在使用react navigation和animated.Scrollview

我有这个滚动视图

<Animated.ScrollView 
        onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: false })}            
        scrollEventThrottle={1}
        style={{ backgroundColor: '#fff'}}>

构造函数是：

constructor(props) {
    super(props);

    this.state = {
      scrollY: new Animated.Value(0),
    }

    this.state.scrollY.addListener(value => {
      this.props.navigation.setParams({reverseColorValue: value.value > 200})
    })

  }

我使用reverseColorValue将我标题图标的reverseColor设置为true，然后用户滚动更多200像素。

此模式有效，但非常慢。有没有使用AddListener设置reverseColorValue的方法？还是加速它的东西？

Answer 1

您在每个滚动事件中都在运行setParams。下面的代码可能是更好的性能，因为你不会做不必要的设置操作。

// this might not be the exact behavior you want but its just an example of my idea
this.state.scrollY.addListener(value => {
    if (value.value > 200 && this.props.navigation.state.params.reverseColorValue === false) {
      this.props.navigation.setParams({reverseColorValue: true})
    } else if (value.value <= 200 && this.props.navigation.state.params.reverseColorValue === true) {
      this.props.navigation.setParams({reverseColorValue: false})
    }
})

滚动200px后设置一个布尔值true

1 个答案: