React Native fetching kütüphanelerinden en iyi olanıdır. Datalar üzerinde get, post, delete veya asenkron işlemler yapmamızı sağlar.
Kurulum
npm install axios
Import
import axios from 'axios';
Kullanım(Hooks)
import React, { useState, useEffect } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import { Left, Body, Right, Thumbnail, Text, Button, List, ListItem, View } from 'native-base';
import { FlatList } from "react-native-gesture-handler";
import axios from 'axios';
export default function RandomUserScreen({ navigation }) {
const [data, setData] = useState({ users: [] });
async function _getRandomUsers() {
const result = await axios(
'https://www.randomuser.me/api/?results=30',
).then(response => {
console.log(response.data.results);
setData(response.data.results);
})
.then(json => {
//console.log({ json })
})
.catch(error => {
console.error({ error })
});
}
useEffect(() => {
_getRandomUsers();
}, []);
return (
<>
<Text>RandomUSer</Text>
<SafeAreaView style={styles.container}>
<List>
<FlatList
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: item.picture.thumbnail, width: 52, height: 52, }} />
</Left>
<Body>
<Text>{item.name.first}</Text>
<Text note>{item.name.last}</Text>
</Body>
<Right>
<Text note>{item.location.city}</Text>
</Right>
</ListItem>
)}
/>
</List>
</SafeAreaView>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
</>
)
}
const styles = StyleSheet.create({
container: {
},
});
