Gestos de deslizamiento, es decir, desplazamiento, tirar para actualizar, etc.
Me estoy tirando de los pelos tratando de hacer que esto funcione, no entiendo cómo las aplicaciones como Facebook logran esto tan bien. Parece algo tan simple de implementar, pero por mi vida no puedo resolverlo.
FYI: estoy usando una FlatList con componentes táctiles en el interior. He estado jugando con los apoyos de FlatList (en el desplazamiento, al arrastrar el inicio del desplazamiento, al arrastrar al final del desplazamiento, etc.) así como con los apoyos táctiles (al presionar, al presionar, al presionar retrasar, etc.).
Lo que quiero: en la aplicación de Facebook, en el MOMENTO en que empiezo a desplazarme o tirar para actualizar, los comentarios de toque están deshabilitados para que no parezca que hice clic en una publicación. Pero al mismo tiempo, en el MOMENTO en que toco una publicación, la retroalimentación del toque es muy receptiva. ¿Cómo se hace esto?
Lo que obtengo: en el momento en que empiezo a desplazarme o tirar para actualizar, se reproduce la respuesta del toque aunque quisiera desplazarme/actualizar. Para solucionar esto, intenté poner un pressDelayIn de 50 ms. Pero ahora, tocar rápidamente una publicación no reproduce los comentarios.
export default function App() { const [refreshing, setRefreshing] = useState(false); const [posts, setPosts] = useState([ { id: 1, username: '@somedude', body: 'This is the best app ever, wow.', }, { id: 2, username: '@doggo', body: 'Woof woof. Woof woof woof! Woof... Woof woof? Woof!', }, ]); const onRefresh = () => { setRefreshing(true); setTimeout(() => setRefreshing(false), 1000); } return ( <SafeAreaView style={styles.container}> <FlatList data={posts} renderItem={({ item }) => <Post post={item} />} keyExtractor={item => item.id} refreshing={refreshing} onRefresh={onRefresh} /> </SafeAreaView> ); } export const Post = ({ post }) => { return ( <TouchableOpacity activeOpacity={0.5} onPress={() => console.log(`Press id ${post.id}`)} > <View style={styles.postPontainer}> <View style={{ marginBottom: 5 }}> <Text>{post.username}</Text> </View> <View style={styles.textContainer}> <Text>{post.body}</Text> </View> </View> </TouchableOpacity> ); }puede verificar esta respuesta, creo que lo ayudará a resolver su problema.
Creo que pointerEvents es la propiedad que necesita para manejar esto. esta propiedad controla si la Vista puede ser el destino de eventos táctiles.
Definitivamente entiendo la frustración. Haría +1 en la sugerencia de ucup para verificar el controlador de gestos nativos. Mientras tanto, deshabilité TouchableOpacity mientras me desplazaba y volví a marcar delayPressIn y parece funcionar bastante bien. Mira lo que piensas:
Agregar estado a la pista canPress
export default function App() { const [canPress, setCanPress] = useState(true); // const [refreshing, setRefreshing] = useState(false); ...Conéctese a FlatList
<SafeAreaView style={styles.container}> <FlatList data={posts} onScrollBeginDrag={() => setCanPress(false)} // onScrollEndDrag={() => setCanPress(true)} // renderItem={({item}) => <Post post={item} canPress={canPress} />} // keyExtractor={item => item.id} refreshing={refreshing} onRefresh={onRefresh} /> </SafeAreaView> Luego, simplemente conéctese a su TouchableOpacity
<TouchableOpacity disabled={!canPress} // activeOpacity={0.5} delayPressIn={50} // onPress={() => console.log(`Press id ${post.id}`)}> ...¡Buena suerte!