javascript - react-native:如何在 ScrollView onScroll 中添加标题动画
问题描述
我正在屏幕上使用 ScrollView 实现动画标题。在scrollView onScroll 上,我还在scrollview Y 位置的基础上设置myview。像这样
const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
let _currentSection;
// loop sections to calculate which section scrollview is on
state.sections.forEach((section, index) => {
// adding 15 to calculate Text's height
const moveToPOsition = wp('24') * 5.8 * index
console.log((y), state[section], index, moveToPOsition)
if ((y + 15) > moveToPOsition) _currentSection = index
})
// settint the currentSection to the calculated current section
setState((currentState) => ({ ...currentState, currentSection: _currentSection }))
}
现在在实现动画标题时,我需要在滚动上添加动画代码。这个
const handleScroll = Animated.event(
[
{
nativeEvent: {
contentOffset: { y: scrollY.current },
},
},
],
{
useNativeDriver: true,
},
);
当我将两个代码一起添加并调用滚动视图的 onScoll 时,它们不起作用......而它们分别起作用。
const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
let _currentSection;
// loop sections to calculate which section scrollview is on
state.sections.forEach((section, index) => {
// adding 15 to calculate Text's height
const moveToPOsition = wp('24') * 5.8 * index
console.log((y), state[section], index, moveToPOsition)
if ((y + 15) > moveToPOsition) _currentSection = index
})
// settint the currentSection to the calculated current section
setState((currentState) => ({ ...currentState, currentSection: _currentSection }))
Animated.event(
[
{
nativeEvent: {
contentOffset: { y: scrollY.current },
},
},
],
{
useNativeDriver: true,
},
)
}
像这样调用 onScoll
<Animated.ScrollView
style={styles.scrollView}
ref={scrollView}
contentContainerStyle={{paddingTop: headerHeight}}
scrollEventThrottle={100}
bounces={false}
onScroll={onScroll}>
{state.sections.map(section => (
<Item key={section.id} category={section}
onItemLayout={onItemLayout} data={data} />
))}
</Animated.ScrollView>
解决方案
我找到了解决方案
const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
let _currentSection;
// loop sections to calculate which section scrollview is on
state.sections.forEach((section, index) => {
// adding 15 to calculate Text's height
const moveToPosition = wp('24') * 5.8 * index
// console.log((y), state[section], index, moveToPOsition)
if ((y + 15) > moveToPosition) _currentSection = index
})
const moveTabToPosition = ((Screen.width) / 5) * _currentSection
tabScrollView.current?.scrollTo({ x: moveTabToPosition, y: 0, animated: true });
if (state.currentSection != _currentSection) {
// settint the currentSection to the calculated current section
setState((currentState) => ({ ...currentState, currentSection: _currentSection }))
}
}
并将其添加到 Animated.Event 链接中
const handleScroll = Animated.event(
[
{
nativeEvent: {
contentOffset: { y: scrollY.current },
},
},
],
{
useNativeDriver: true,
listener: event => {
onScroll(event);
},
},
);
推荐阅读
- android - 如何删除 Ionic 5 电容器 Android 应用程序上不需要的权限?
- python - 一些 Python 对象未绑定到检查点值,可能是由于 Python 程序中的更改
- firebase - 如何在 Flutter 中将 XFile 转换为文件
- node.js - 如何在 VS Code 节点终端中获取可扩展对象视图作为输出?
- javascript - 无法使用附加元素访问更新的状态
- types - Agda 模式如何与相同类型的构造函数匹配?
- reactjs - 何时为 Web 应用程序使用 HLS 或 DASH 格式
- php - 在真实字符串的情况下,如何在不默认为“0”的情况下将 php 字符串转换为浮点数
- spring-boot - Spring Boot 从 application.properties 中外部化属性
- java - 在字符串比较期间忽略无效字符