我在本机反应中实现了一个浮动按钮(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');
}}
/>
{this.state.showBlueButton && (
<TouchableOpacity
style={{
backgroundColor: AppColors.DARK_BLUE_BUTTON_COLOR,
top: -50,
alignItems: 'center',
width: 150,
height: 50,
borderRadius: 28,
justifyContent: 'center',
left: '30%',
shadowOffset: { width: 1, height: 1 },
shadowColor: 'grey',
shadowOpacity: 2.0,
}}>
<Text style={{ color: AppColors.WHITE, fontSize: 20 }}>
+ Symptoms
</Text>
</TouchableOpacity>
)}
<WearableStatus
batteryPercentage="80%"
batteryStatus={true}
/>
<Support
address="sdfsd fsdfsdfsdf"
phone="122-534-3445"
email="sdfsdfdsfsd@mgail.com"
/>
</ScrollView>
任何帮助表示赞赏。谢谢。