前面把程式碼的架構說的差不多了，我們今天將進入應用程式表單設計的核心部分。從 PDF 文件可以看到，表單的第一頁雖然看起來內容豐富，但實際上可以分為兩個主要部分：

1. 基本資料部分：這部分主要收集pary(參與者)的基本資料。
2. 重點部分：這部分聚焦於駕照與行照的相關資訊。值得注意的是，這些資料在第一頁上重複了三次（對應三位參與者），這是個好消息，因為我們只需要設計一次該區塊即可，接下來就是用元件的概念重複利用。

彈性設計需求

表單的使用者提到，參與者（Party）的順序可能會根據情況進行調整。因此，資料庫設計時需要具備一定的彈性，以便能夠適應這樣的需求。但今天我們的重點將放在 UI 設計部分，如何利用 NativeBase 來實現這些表單欄位。

開啟 PDF 檔案的方法

當然，你可以直接點兩下開啟 pdf檔案。你會看到 pdf檔案，然後點擊後會發現他是可以互動的像是表單一樣。然後存擋資料會變，其實滿有趣的。

但既然有可以點擊和修改的概念就表示他可能會有資料欄位的設計。我找了一下網路可以用 Adobe Acrobat Pro 開啟這個檔案看到資料欄位，但是～～～～這個要錢啊。只是想開啟檔案看一下欄位還要花錢也太....。

我找了很久終於找到線上有可以看的網站， pdfFiller。把檔案上傳上去打開，可以看到每個欄位分別是什麼，在右邊可以看到這個欄位的名稱，甚至下拉式選單會有選項。

表單欄位設計與 NativeBase 的對應

資料欄位的類型其實就可以對應 網頁的資料欄位，不過我們現在寫的 app，選用的UI套件 native-base 我們來看看怎麼對應到 UI的設計。

[!Tip]
Froms表單：通常表單類的話在網頁會用表單來實作，native-base也有 forms的元件

下拉式選單

表單有像是網頁的下拉式選單可以選擇。點進去會有選項可以選，選了後可以填到欄位裡面。

在 native-base 裡面有 Select 可以用來實作。

const Example = () => {
  const [service, setService] = React.useState("");
  return <Center>
      <Box maxW="300">
        <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size="5" />
      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
      </Box>
    </Center>;
};

Checkbox

也有和網頁一樣的 checkbox。

Checkbox 也有可以對應的

const Example = () => {
  return <HStack space={6}>
      <Checkbox value="test" accessibilityLabel="This is a dummy checkbox" />
      <Checkbox value="test" accessibilityLabel="This is a dummy checkbox" defaultIsChecked />
    </HStack>;
};

輸入框 Input

最基本的輸入文字的輸入匡

最常見的表單元件之一就是輸入框，用來讓使用者輸入文字內容。在 NativeBase 中， Input 元件可以對應到 PDF 的文字輸入欄位。

const Example = () => {
  return <Box alignItems="center">
      <Input mx="3" placeholder="Input" w="100%" />
    </Box>;
};

結語

今天看了一下如果使用 native-base 來實作表單是否可行，可以快速實現 PDF的各種欄位。第一頁的基本元素看起來是沒什麼太大問題。

明天會再來看一下其他的部分，接著實作UI來看看。

#it鐵人