Flatlist

使用Flatlist

• 在src/screens資料夾中新增一個Screen叫做ListScreen

import React from 'react';
import {Text, StyleSheet, FlatList} from 'react-native';

const ListScreen = function(){
  const friends = [
    {name:'Peter'},
    {name:'Jane'},
    {name:'Oliver'},
  ];
	
  return(
    <FlatList
      keyExtractor={(item) => item.name}
      data = {friends}
      renderItem = {({item}) => {
      return <Text>{item.name}</Text>
      }}
	  ItemSeparatorComponent={()=><View style={{backgroundColor:'grey', height:1}}></View>}
    />
  );
}

const styles = StyleSheet.create({});

export default ListScreen;

使用Pull to Refresh

import React, {useState} from 'react';
import {View, Text, FlatList} from 'react-native';

function MyScreen(){
  const [refreshing, setRefreshing] = useState(false);
	
  myList = [
    {id:"1", name:"Peter"},
    {id:"2", name:"Mary"},
  ];
	
  return (
    <View>
    <FlatList 
      data={myList}
      keyExtractor={(item) => item.id}
      renderItem={({item}) => {item.name}}
      refreshing = {refreshing}
      onRefresh = {() => console.log('refreshing')}
    />
    </View>
  );
}