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

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

Megvalósítás GitHubon:

• https://github.com/oktat/employees_rnlist.git (2023)

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

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