List applications are very common. This article makes a simple list, which has two text labels and a button, and can click the button to trigger a time.

For each item in the list, the elements can be laid out using HTML, such as Flexbox:

import React from "react"; import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar,Button } from "react-native"; const DATA = [ { id: "1", title: "Reco", location: "home", }, { id: "2", title: "Reco", location: "office", }, { id: "3", title: "Rita", location: "home", }, ]; const Item = ({ title ,id,location}) => ( <View style={styles.item}> <Button style={{ fontSize: 30}} onPress={() => alert('Hello, world! '+id)} title="Confirm sheet" color="#841584"/> <Text style={styles.title}>{title}</Text> <Text style={styles.title}>{location}</Text> </View> ); const App = () => { const renderItem = ({ item }) => ( <Item title={item.title} id={item.id} location={item.location}/> ); return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={renderItem} keyExtractor={item => item.id} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { flex: 1, flexDirection: 'row', backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, padding:10, }, button: { backgroundColor: "blue", padding: 20, borderRadius: 5, }, buttonText: { fontSize: 20, color: '#fff', }, }); export default App;Copy the code

The outermost layer of the UI is the SafeAreaView component. Its purpose is to render content within the security zone boundaries of the device. It is currently only available on iOS devices with iOS version 11 or higher. SafeAreaView renders nested content and automatically applies padding to reflect navigation bars, tabs, toolbars, and other parts of the view not covered by the ancestor view. And, most importantly, the Safe Area’s fill reflects the physical limitations of the screen, such as rounded corners or camera grooves (the sensor housing Area of the iPhone X).

The inner layer is the FlatList component. You can point to an array with multiple objects as data providers via the data property. Render an item in a list using a function pointed to by the renderItem property. This function should return a JSX that performs the component composition of the item:

<Item title={item.title} id={item.id} location={item.location}/>
Copy the code

Here Item is a custom tag. The implementation function of this custom tag is Item function, and the code is as follows:

const Item = ({ title ,id,location}) => ( <View style={styles.item}> <Button style={{ fontSize: 30}} onPress={() => alert('Hello, world! '+id)} title="Confirm sheet" color="#841584"/> <Text style={styles.title}>{title}</Text> <Text style={styles.title}>{location}</Text> </View> );Copy the code

The parameter to the Item function extracts the value of the attribute in the tag by name. For example, the title argument extracts the title value of the corresponding Item tag, that is, item.title.

The keyExtractor attribute extracts the ID from the item, in this case item.id:

keyExtractor={item => item.id}
Copy the code