MMTTMM
2023-08-05 21:08:25
我已經在本機反應中實現了一個浮動按鈕(TouchableOpacity)。我能夠根據滾動位置顯示和隱藏按鈕。當滾動視圖向上滾動時,我想將按鈕完全移出屏幕(底部),而不是顯示和隱藏,當滾動視圖向下滾動時,我想將按鈕從屏幕底部向上移動。我想使用流暢的動畫來實現這一點。下面是我用來創建浮動按鈕并在滾動時顯示和隱藏的代碼。//For Handling button show and hide for the scroll position.handleScroll = (event: any) => { const { animatedOpacityValue, showBlueButton } = this.state; const scrollPosition = event.nativeEvent.contentOffset.y; console.log('Scroll Position:', scrollPosition);if (scrollPosition > 0 && scrollPosition < 400) { Animated.timing(this.state.animatedOpacityValue, { toValue: 1, duration: 5, useNativeDriver: true, }).start(() => this.setState({ showBlueButton: true }));} else if (scrollPosition > 400 && showBlueButton) { Animated.timing(this.state.animatedOpacityValue, { toValue: 0, duration: 5, useNativeDriver: true, }).start(() => this.setState({ showBlueButton: false })); }};// 渲染方法 <ScrollView style={styles.scrollViewStyles} contentContainerStyle={{ paddingBottom: 330 }} contentInset={{ top: 10, bottom: Platform.OS === 'ios' ? 0 : 100, }} onScroll={this.handleScroll} scrollEventThrottle={16}> <CardView onSymptomLog={() => { this.state.navigation.push('SymptomLogs'); }} /> <TodaySymptomsCard showBlueView={this.state.showBlueView} reminderTime={'5:40 PM'} symptomsCount={0} onEditAction={() => { this.state.navigation.push('SetRemainder'); }}任何幫助表示贊賞。謝謝。
1 回答

蕪湖不蕪
TA貢獻1796條經驗 獲得超7個贊
根據您的scrollPosition調用這些函數
const driver = Animated.value(0) //1 if the button should be shown by default
const fadeIn = () => {
Animated.timing(driver, {
toValue: 1,
duration: 500,
useNativeDriver: true
}).start()
}
const fadeout = () => {
Animated.timing(driver, {
toValue: 0,
duration: 500,
useNativeDriver: true
}).start()
}
將 TouchableOpacity 包裝在 <Animated.View> 中并設置如下樣式:
Style={{
transform: [{
translateY: driver.interpolate({
inputRange: [0, 1],
outputRange: [startingYPosition, EndingYposition]
})
}]
}}
假設按鈕可見時的positionY為700,那么outputRange的值將是[0, 700]
添加回答
舉報
0/150
提交
取消