oktatas:telefon:react_native:szolgaltatas
< React Native
React Native - Szolgáltatás
Könyvtárszerkezet
app01/
|-components/
|-services/
| `-employeeService.js
`-App.js
Szolgáltatás elkészítés
- employeeService.js
const host = 'http://localhost:8000/';
const endpoint = 'employees';
export async function getEmployees() {
const url = host + endpoint;
const response = await fetch(url);
const data = await response.json();
return data;
}
Felhasználás
- App.js
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { getEmployees } from './services/employeeService';
export default function App() {
const [employees, setEmployees] = useState([]);
useEffect(() => {
getEmployees().then( data => setEmployees(data))
}, [])
return (
<View style={styles.container}>
<Text></Text>
<FlatList
data={employees}
renderItem={({item}) => (
<View style={styles.list}>
<Text style={styles.listText}>{item.name}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
list: {
backgroundColor: '#ddd',
padding: 15,
borderRadius: 5,
width: '90%',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 15,
boxShadow: '2px 2px 2px black',
},
listText: {
fontSize: 18
},
});
oktatas/telefon/react_native/szolgaltatas.txt · Utolsó módosítás: 2024/02/28 21:54 szerkesztette: admin