react-native - scrollTopTop 侦听器在组件中不起作用(React-Native)
问题描述
我曾经在 ScrollView 中有相同的实现并且它正在工作,当我更改为 flatlist 时,我的滚动到顶部停止工作
我正在使用事件寄存器,因为我有嵌套导航。
这是我的实现:(在 Navigation.js 中)
<Tab.Screen
name="Home"
component={HomeNavigation}
listeners={({navigation, route}) => ({
tabPress: () => {
const isAtFirstScreenOfStack =
!route.state || route.state?.index === 0;
if (navigation.isFocused() && isAtFirstScreenOfStack) {
console.log('Scrolling to Top');
EventRegister.emit('scrollToTop', 'it works!!!');
}
},
})}
在我有列表的组件中:
let scrollViewRef = useRef(null);
let scrollToTopListener = useRef(null);
useFocusEffect(
useCallback(() => {
scrollToTopListener.current = EventRegister.addEventListener(
'scrollToTop',
() => {
if (scrollViewRef.current) {
scrollViewRef.current.scrollTo({y: 0, animated: true});
}
},
);
return () => {
EventRegister.removeEventListener(scrollToTopListener.current);
};
}, []),
);
...
<FlatList
ref={(ref) => (scrollViewRef = ref)}
...
解决方案
在 FlatList 中使用 scrollToOffset
ref.current.scrollToOffset({y:0,animated:true})
推荐阅读
- python - 我的 Viber 机器人工作速度很慢(Python)我怎样才能让它更快
- javascript - 使 Chrome 扩展 javascript 文档适用于打开网页,而不是弹出
- javascript - 如何为 LightningChartJs 启用默认浏览器滚动行为?
- node.js - "message": "ENOENT: 没有这样的文件或目录,打开 'E:\\astrology\\utils\\uploads\\1600798534862qf.png'"
- reactjs - 部署在heroku上的反应项目是空白的
- mongodb - mongoDB mapReduce 中的 finalize 函数是否并行处理不同的键?
- java - DateTimeFormatter 不使用阿拉伯语或孟加拉语的本地数字
- python - 如何从新的 Twitter 的 API 中获取 3200 条推文以及 GetOldTweets3 替代方案是什么?
- r - 是否有用于绘制竞争风险的加权 (IPTW) 累积发生率曲线的 R 函数?
- reactjs - 确认浏览器后退按钮