[[oktatas:telefon:react_native|< React Native]]

====== React Native - Szolgáltatás ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Könyvtárszerkezet =====

<code>
app01/
  |-components/
  |-services/
  |   `-employeeService.js
  `-App.js
</code>

===== Szolgáltatás elkészítés =====

<code javascript 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;
}
</code>

===== Felhasználás =====

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

</code>