目前我們的 Todo List 已經達到最基本的輸入文字,而且顯示在畫面上。
不過還是有很多可以改進的地方,例如什麼都不輸入或者是輸入空字串,按下新增按鈕的話,他也是會新增一筆到 todos 的狀態中。
這對於使用者可能會有點疑惑,所以今天我們要來做一點防呆機制以及提示的功能。
說到提示的部分,在網頁中,可能會使用 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
,讓你的待辦事項不僅可以增加,還能標記完成或未完成,明天見👋!