iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0

目前我們的 Todo List 已經達到最基本的輸入文字,而且顯示在畫面上。
不過還是有很多可以改進的地方,例如什麼都不輸入或者是輸入空字串,按下新增按鈕的話,他也是會新增一筆到 todos 的狀態中。
這對於使用者可能會有點疑惑,所以今天我們要來做一點防呆機制以及提示的功能。

Toast

說到提示的部分,在網頁中,可能會使用 Alert、Dialogue,或者是 Toast。在 React Native 中,確實是有提供 Toast 的元件可以使用,只不過很可惜的,這是一個名為 ToastAndroid 的元件,如同字面上的意義,他是一個只能給 Android 使用的元件。如果你只想開發 Android 的話,那麼就可以考慮使用 ToastAndroid

不過我們的目標是要開發雙平台,就要尋找其他替代方案。還好目前 React Native 的生態系十分蓬勃,可以使用 react-native-root-toast 這個套件來解決這個問題。

先安裝該套件:

$ npm install react-native-root-toast

接著到 App.js 使其底下的子元件都能使用 Toast:

import { RootSiblingParent } from 'react-native-root-siblings'

export default function App() {
  return (
    <StoreProvider>
      <RootSiblingParent>
        <SafeAreaView style={styles.container}>
          <Head />
          <List />
          <StatusBar style='auto' />
        </SafeAreaView>
      </RootSiblingParent>
    </StoreProvider>
  )
}

針對新增事項做優化

接下來我們在 Head 這個元件中的 handleAddItem 這個方法使用 Toast:

import Toast from 'react-native-root-toast'

const handleAddItem = () => {
    if (inputText.trim() === '') {
      let toast = Toast.show('請輸入事項', {
        duration: Toast.durations.SHORT,
        position: Toast.positions.TOP,
        shadow: true,
        animation: true,
        hideOnPress: true,
        delay: 0
      })
    } else {
      dispatch({ type: 'ADD_TODO', payload: inputText.trim() })
    }
  }

這一段先針對輸入的文字使用 trim() 移除了兩側的空白部分,並且檢查是否為空字串,是的話就會執行 Toast。

但是在 Demo 的過程可以看到,如果是在有瀏海的機種,這個 Toast 就會被擋到,這也沒關係,我們可以稍微調整一下位置,只要改變一下 position 就可以了:

position: Toast.positions.TOP + 20,

現在畫面上 Toast 的位置就可以完美提示使用者不要輸入空白事項。

其他應該注意的小地方

輸入文字首字為大寫

可能有些人在測試輸入文字過程中有發現,輸入的第一個文字都會是大寫,可能不是適用於每個人的體驗。

這裡也很簡單,只要在 TextInput 加上一個 autoCapitalize,值為 "none" 就可以了。

<TextInput
  value={inputText}
  placeholder='請輸入事項'
  onChangeText={handleInputText}
  style={styles.input}
  autoCapitalize='none'
/>

新增完清除輸入框

這裡也是一個優化使用者體驗的一個地方,每當新增完一筆事項,我們都還要手動刪除輸入框文字。由於狀態的部分都寫在 context 中了,所以我們只需要在該部分做一個新增完就清除輸入框文字的動作:

// src/store/index.js
case 'ADD_TODO':
  return {
    ...state,
    todos: [
      ...state.todos,
      {
        id: state.todos.length,
        text: action.payload,
        checked: false
      }
    ],
    inputText: ''
  }

總結

我們已經針對 Todo List 應用做了許多優化,從基本的輸入文字顯示到提示使用者不要輸入空白事項,以及其他使用者體驗上的細節。我們加入了 Toast 提示、調整了其位置避免被瀏海擋住、還修改了文字輸入框的自動大寫行為,並在新增事項後自動清空輸入框。

明天,我們將進一步提升 App 的應用體驗。畢竟,Todo List 的核心功能之一就是讓使用者能夠勾選已完成的事項。我們將介紹如何整合 Checkbox,讓你的待辦事項不僅可以增加,還能標記完成或未完成,明天見👋!


上一篇
Day 6 - 使用 React Native 的列表元件展示待辦事項
下一篇
Day 8 - 如何使用 Checkbox 讓使用者勾選已完成
系列文
掌握 React Native 與 Expo:30天雙打,新手也能精通跨平台開發!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言