【React Native】文件翻譯閱讀紀錄 - 指南 - 改善用戶體驗

by - 上午9:00

Facebook Open Source React Native

改善用戶體驗

配置文本輸入


在觸摸手機上輸入文字是一個挑戰 - 小屏幕,軟件鍵盤。但根據您需要的數據類型,您可以通過正確配置文本輸入來簡化:

  • 自動聚焦第一個字段
  • 使用佔位符文本作為預期數據格式的示例
  • 啟用或禁用自動資產調整和自動更正
  • 選擇鍵盤類型(例如電子郵件,數字)
  • 確保返回按鈕聚焦下一個字段或提交表單

查看TextInput文檔以獲取更多配置選項。


鍵盤可見時管理佈局


軟件鍵盤幾乎佔據了屏幕的一半。如果您有可以被鍵盤覆蓋的交互式元素,請確保使用KeyboardAvoidingView組件仍然可以訪問它們。


在手機上試試吧

使可更換區域更大


在手機上按按鈕時很難非常精確。確保所有交互式元素都是44x44或更大。一種方法是為元素留出足夠的空間,padding,minWidth和minHeight樣式值對此有用。或者,您可以使用hitSlop prop來增加交互區域而不會影響佈局。這是一個演示:


Use Android Ripple

Android API 21+使用材質設計紋波,在用戶觸摸屏幕上的可交互區域時為其提供反饋。 React Native通過TouchableNativeFeedback組件公開它。使用這種可觸摸效果而不是不透明度或高光效果通常會使您的應用感覺更適合平台。也就是說,使用它時需要小心,因為它不適用於iOS或Android API <21,因此您需要回退使用iOS上的其他可觸摸組件之一。您可以使用像react-native-platform-touchable這樣的庫來為您處理平台差異。


屏幕方向鎖定

默認情況下,多個屏幕方向應該可以正常工作,除非您使用Dimensions API並且不處理方向更改。如果您不想支持多個屏幕方向,可以將屏幕方向鎖定為縱向或橫向。

在iOS上,在Xcode的“常規”選項卡和“部署信息”部分中啟用您要支持的設備方向(確保在進行更改時從“設備”菜單中選擇了iPhone)。對於Android,打開AndroidManifest.xml文件並在activity元素中添加'android:screenOrientation =“portrait”'以鎖定縱向或'android:screenOrientation =“landscape”'以鎖定到橫向。

更多

Material Design 和 Human Interface Guidelines 是學習移動平台設計的重要資源。



You May Also Like

0 意見