¿Hay alguna manera de deslizar hacia abajo para actualizar en reaccionar nativo en una vista normal sin usar algo como FlatList o ScrollView?
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.