search

ptomasroos / react-native-scrollable-tab-view

Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
https://www.npmjs.com/package/react-native-scrollable-tab-view
6.93k stars 2.28k forks source link

本组件和Flatlist使用，左右滑动时，触发Flatlist列的点击，怎么解决 #1111

Open flyinglb opened 4 years ago

flyinglb commented 4 years ago

1、本组件和Flatlist使用，左右滑动时，触发Flatlist列的点击，怎么解决 2、次组件有没有懒加载功能

Frank-Chen0 commented 4 years ago

第一个问题 import {TouchableOpacity} from 'react-native-gesture-handler'; 可以解决。但是，会出现点击事件重叠的问题，这个我也没找到好的解决方案，如果你的列只有一个点击事件，内部不包含其他的。你可以用这个，否则建议用react-native-tab-view这个组件，但这个组件有个问题，会一次把所有的tab里的内容都加载了，需要你做一下处理

flyinglb commented 4 years ago

你好，感谢你的回答，我测试下。

AlexJeeee commented 4 years ago

第一个问题 import {TouchableOpacity} from 'react-native-gesture-handler'; 可以解决。但是，会出现点击事件重叠的问题，这个我也没找到好的解决方案，如果你的列只有一个点击事件，内部不包含其他的。你可以用这个，否则建议用react-native-tab-view这个组件，但这个组件有个问题，会一次把所有的tab里的内容都加载了，需要你做一下处理

你好，请问你在用react-native-tab-view的时候有遇到在flatlist里加新数据的时候列表直接跳到顶部的问题吗？

flyinglb commented 4 years ago

没有碰到这个问题，是不是你的css样式写的不对的原因。

AlexJeeee commented 4 years ago

没有碰到这个问题，是不是你的css样式写的不对的原因。

这个跟css应该没关系，应该是加新数据会导致组件重新渲染

flyinglb commented 4 years ago

第一个问题 import {TouchableOpacity} from 'react-native-gesture-handler'; 可以解决。但是，会出现点击事件重叠的问题，这个我也没找到好的解决方案，如果你的列只有一个点击事件，内部不包含其他的。你可以用这个，否则建议用react-native-tab-view这个组件，但这个组件有个问题，会一次把所有的tab里的内容都加载了，需要你做一下处理

你好，还是无法解决滚动和flatlist列表内容点击冲突问题，只要左右滚动就会自动触发flatlist项目的点击打开事件。

zhuiye commented 3 years ago

兄弟，请看下面的链接，照着里面改 库里的 AnimatedViewPagerAndroid 就可以了 https://github.com/react-native-community/react-native-viewpager/issues/73#issuecomment-562950417

SteveSuv commented 3 years ago

兄弟解决了吗？ 我项目里也遇到了这个问题 应该是react-native-pager-view和react-native-scrollable-tab-view的事件冲突了 我卸载了react-native-pager-view就没事了，但是项目又需要用到这个库