javascript - 如何将按钮从屏幕中间移动到屏幕底部
问题描述
我在本机反应中实现了一个浮动按钮(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>
任何帮助表示赞赏。谢谢。
解决方案
根据您的 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]
推荐阅读
- javascript - 从另一个函数接收数组并设置为值
- node.js - 快递应用程序中的摩根记录器不会为每个条目创建新行
- javascript - 是否显示=隐藏免费浏览器加载
- docker - Docker容器中的Weblogic端口绑定
- r - 使用 mixtools 时无法更改 R 中的轴以获取密度图
- go - 我可以使用 Go 在现有图像上添加标题吗?
- python - 搜索目录以根据数字返回固定文件
- vba - 循环遍历一张表中的列值并将另一列中的 COUNTIF 值粘贴到另一张表中
- firebase - 如何在 Firestore 中启用持久性存储?
- google-calendar-api - 如何通过他们的 v3 FreeBusy API 使用谷歌的“有趣的日历”?