React Native - Szolgáltatás

• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

app01/
  |-components/
  |-services/
  |   `-employeeService.js
  `-App.js

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;
}

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
  },
});