Day 7 - 避免使用者輸入空字串 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 7

Mobile Development

掌握 React Native 與 Expo：30天雙打，新手也能精通跨平台開發！系列第 7 篇

Day 7 - 避免使用者輸入空字串

15th鐵人賽 react-native expo

Bucky

團隊大船要開囉

2023-09-22 00:19:58

427 瀏覽

分享至

目前我們的 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: ''
  }