陣營本地限制onScroll

道歉初學者的陣營原住民問題....陣營本地限制onScroll

我放在一起的ListView上滾動的動畫：

<ListView scrollEventThrottle={16} 
    onScroll={ 
     Animated.event([{nativeEvent: {contentOffset: { y: this.state.animTranslateY}}}] 
     ) 
    } 
    ... 
/> 

<Animated.View style={[{height: 50, 
    position: 'absolute', 
    right: 0, 
    left: 0, 
    top: 0, 
    transform: [{ translateY: this.state.animTranslateY.interpolate({ 
     inputRange: [0, this.state.infoHeight], 
     outputRange: [this.state.infoHeight, 0] }) }] 
    }]} 
}> 
    ... 
</Animated.View>

我想限制動畫，這樣，一旦用戶滾動了一定的距離（比如100像素），事件不再發生，有效修復了動畫視圖。

我試圖在onScroll事件（if (event.nativeEvent.contentOffset.y < 100) {}）中插入一個條件，但我的語法關閉。我試過創建一個單獨的功能，但不能使用Animated.event（和event生成一個動搖的效果，即使scrollEventThrottle）工作。

任何人都可以推薦如何正確插入條件？或者使用Animated.event產生一個函數？

謝謝！

來源

2016-12-12 dedaumiersmith

也許你應該試試ScrollView。它具有道具scrollEnabled，當您不希望用戶能夠再滾動時，您可以將其轉爲假。 ScrollView也有onScroll，所以應該很容易在這裏實現邏輯。

下面是文檔了滾動：https://facebook.github.io/react-native/docs/scrollview.html#scrollenabled

來源

2016-12-12 18:51:22

感謝您的建議。不幸的是，即使在Animated.View到達目的地之後，設計也會要求ListView/ScrollView繼續滾動。在外觀上，它旨在類似於第二個'SectionHeader'。 – dedaumiersmith

使用extrapolate clamp做到這一點。從文檔：'默認情況下，它會將曲線外推到給定的範圍之外，但也可以讓它限制輸出值。'通過限制輸出值，一旦它達到最後的輸出值就會停止動畫。

transform: [{ translateY: this.state.animTranslateY.interpolate({ 
    inputRange: [0, this.state.infoHeight], 
    outputRange: [this.state.infoHeight, 0] }) }], 
    extrapolate: 'clamp' 
}]}

此代碼將停止翻譯，一旦你inputRange命中this.state.infoHeight。

來源

2017-08-14 17:52:39

陣營本地限制onScroll

回答

相關問題