今天來製作地點篇與資訊聯絡篇的任務列表，會使用到昨天建好的JSON檔以及FlatList。

Flatlist可用來製作列表，其本身就是一個迴圈指令，使用時需要對三個參數data、renderItem、keyExtractor做設定：

1. data：將一筆陣列資料經由data傳入
   將JSON檔import進來後把locationData.locationList設定給data。
2. renderItem：資料渲染在畫面上的形式
   renderItem對應一個函數，由data接收的陣列資料會逐筆取出經由{item}傳給renderItem函數，函數取得單筆資料item來渲染畫面。
3. keyExtractor：設定可以辨識資料的key，有點像每筆資料的id
   陣列渲染的效能會影響畫面流暢度，如果陣列被更改，一般的作法會將整個列表重新渲染，為了提高效能React Native要求每一筆資料都跟著一個可辨識該筆資料的key，如此當陣列中某筆資料被修改時，畫面只會重新渲染與該筆資料有關的畫面。

我先將JSON檔import進來後把locationData.locationList設定給data，之後將要顯示的畫面寫好（這邊採用自訂元件的方式，下篇會介紹），而keyExtractor我則將陣列中的title設為每筆資料的key。

import React from "react";
import LocationDetail from "../components/LocationDetail";
import locationData from "../json/location.json";

const LocationScreen = ({ navigation }) => {
  return (
    <ImageBackground style={{flex: 1}} source={require('../../assets/bg_all.png')}>
      <FlatList
      data={locationData.locationList}
      renderItem={({ item }) => 
      <LocationDetail 
        location={item}
        navigation={navigation}       
      />}
      keyExtractor={item => item.title}
      />
    </ImageBackground>
  );
};

export default LocationScreen;

＊小提示：navigation是用來記錄頁面跳轉的參數。

資訊聯絡篇的任務列表也是一樣的作法，只要把JSON的部分換成資小連洛篇的檔案即可。