szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:telefon:react_native|< React Native]]

====== React Native lista ======

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

====== Egyszerűen ======

<code javascript App.js>
import { StatusBar } from 'expo-status-bar';
import { FlatList, StyleSheet, Text, View } from 'react-native';


const employees = [
  {id: 1, name: 'Erős István', city: 'Szeged'},
  {id: 2, name: 'Táncos Ernő', city: 'Szeged'},
  {id: 3, name: 'Szabó Tamás', city: 'Szeged'}
];

export default function App() {

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Dolgozók</Text>

      <FlatList 
      data={employees}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.name}</Text>
          <Text>{item.city}</Text>
        </View>
        )}      
      />


      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    width: 200,
  },
  item: {
    flexDirection: 'row',
  },
  title: {
    marginTop: 24,
  },
});
</code>

===== Megvalósítás =====

Megvalósítás GitHubon:
  * https://github.com/oktat/employees_rnlist.git (2023)
===== Dolgozók =====

<code javascript App.js>
import { StatusBar } from 'expo-status-bar';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const employees = [
  {id: 1, name: 'Erős István', city: 'Szeged'},
  {id: 2, name: 'Táncos Ernő', city: 'Szeged'},
  {id: 3, name: 'Szabó Tamás', city: 'Szeged'}
];

const Item = ({name,city}) => (
  <View style={styles.item}>
    <Text style={styles.cell}>{name}</Text>
    <Text style={[styles.cell,styles.city]}>{city}</Text>
  </View>
);

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Dolgozók</Text>

      <FlatList
      data={employees}
      renderItem={({item}) => <Item name={item.name} city={item.city}/> }
      keyExtractor={item => item.id}
      />

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  cell: {
    fontSize: 12,
    padding: 3,
  },
  city: {
    color: 'red',
  },
  item: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
});

</code>

===== Link =====

  * https://reactnative.dev/docs/flatlist (2023)