跳到主要內容

改善使用者體驗

設定文字輸入​

在觸控手機上輸入文字是一項挑戰 - 螢幕小、軟體鍵盤。但是根據您需要的資料類型，您可以透過正確設定文字輸入來簡化操作

  • 自動聚焦第一個欄位
  • 使用佔位符文字作為預期資料格式的範例
  • 啟用或停用自動大寫和自動校正
  • 選擇鍵盤類型 (例如：電子郵件、數字)
  • 確保返回按鈕能聚焦到下一個欄位或提交表單

查看 TextInput 文件以瞭解更多設定選項。

當鍵盤顯示時管理版面配置​

軟體鍵盤幾乎佔據螢幕的一半。如果您有互動元素可能會被鍵盤遮蓋，請確保使用 KeyboardAvoidingView 組件仍然可以存取它們。

將可點擊區域放大​

在手機上，按下按鈕時很難非常精確。請確保所有互動元素都為 44x44 或更大。一種方法是為元素保留足夠的空間，padding、minWidth 和 minHeight 樣式值對此很有用。或者，您可以使用 hitSlop 屬性來增加互動區域，而不會影響版面配置。這是一個示範

使用 Android Ripple 效果​

Android API 21+ 使用 Material Design Ripple 效果，在使用者觸摸螢幕上的互動區域時提供回饋。React Native 透過 TouchableNativeFeedback 組件公開此功能。使用這種觸摸效果而不是不透明度或高亮通常會使您的應用程式在該平台上感覺更合適。也就是說，您需要小心使用它，因為它在 iOS 或 Android API < 21 上不起作用，因此您需要在 iOS 上回退到使用其他 Touchable 組件之一。您可以使用像 react-native-platform-touchable 這樣的函式庫來為您處理平台差異。

螢幕方向鎖定​

預設情況下，多個螢幕方向應該可以正常運作，除非您使用 Dimensions API 並且不處理方向變更。如果您不想支援多個螢幕方向，您可以將螢幕方向鎖定為直向或橫向。

在 iOS 上，在 Xcode 的 General 標籤和 Deployment Info 區段中，啟用您想要支援的 Device Orientation (進行變更時，請確保已從 Devices 選單中選取 iPhone)。對於 Android，開啟 AndroidManifest.xml 檔案，並在 activity 元素中新增 'android:screenOrientation="portrait"' 以鎖定為直向，或新增 'android:screenOrientation="landscape"' 以鎖定為橫向。

深入瞭解

Material Design 和 Human Interface Guidelines 是學習更多關於行動平台設計的絕佳資源。