Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

85
Vistas
Deslice hacia abajo para actualizar en la vista normal en la aplicación nativa de reacción

¿Hay alguna manera de deslizar hacia abajo para actualizar en reaccionar nativo en una vista normal sin usar algo como FlatList o ScrollView?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

No hay una solución integrada para hacer esto. Por lo general, queremos algún tipo de retroalimentación para el usuario, por lo que la acción regular pull to refresh es una opción adecuada y esto obviamente solo funciona en algún tipo de scrollable container .

Sin embargo, si todavía no queremos usar un ScrollView para este propósito, podemos escuchar los gestos táctiles y reaccionar después de cierto umbral de la siguiente manera.

 const SomeRefreshableNonScrollableComponent = (props) => { const y = useRef() function onRefresh() { // refresh or whatever } return ( <View style={{flex :1}} onTouchStart={e=> y.current = e.nativeEvent.pageY} onTouchEnd={e => { // some threshold. add whatever suits you if (y.current - e.nativeEvent.pageY < 40) { onRefresh() } }}> ... </View> ) }

Editar: como respuesta a los comentarios.

Podemos implementar un mecanismo desplegable para actualizar para una FlatList que está anidada dentro de un ScrollView no desplazable de la siguiente manera.

 const [data, setData] = useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) const [refresh, setRefresh] = useState(false) useEffect(() => { if (refresh) { console.log("Refresh my inner data on pull") } }, [refresh]) return ( <ScrollView scrollEnabled={false} nestedScrollEnabled={true}> <FlatList refreshing={refresh} onRefresh={() => setRefresh(true)} data={data} renderItem={({item}) => { return <Text>Hello world</Text> }} /> </ScrollView> ); };

Tenga en cuenta que debe restablecer su estado de refresh a false una vez que se realiza la acción de actualización, por ejemplo, si una llamada a la API devuelve sus datos. De lo contrario, Flatlist seguirá mostrando el indicador de actualización.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda