Sử dụng props secureTextEntry trong React Native Android
TIL
745
react-native
9
android
51
White

Julian Dong viết ngày 25/10/2018

Hôm nay gặp một bug này thấy rất hay nên muốn ghi lại và chia sẻ cho mọi người
Số là mình làm app 1 form đăng nhập bằng email và password. Ban đầu mình làm như sau. Đối với trường email

<TextInput
  keyboardType="email-address"
  placeholder="Email"
  underlineColorAndroid='transparent'
  style={styles.input}
/>

Và đơn giản mình copy paste đoạn code trên xuống và sửa lại 1 xíu cho để hiện thị password bằng cách thêm thuộc tính secureTextEntry vào TextInput như sau

<TextInput
  secureTextEntry
  keyboardType="email-address"
  placeholder="Password"
  underlineColorAndroid='transparent'
  style={styles.input}
/>

Và khi build ra trên iOS chạy một cách ngon lành và chính xác, tuy nhiên trên Android thì input chỗ password không chịu chuyển chữ thành dấu (*) mà hiện nguyên chữ luôn.
Sau một hồi hoang mang Hồ Quỳnh Hương và lên mạng tìm hiểu thì mới phát hiện ra, thuộc tính secureTextEntry chỉ hoạt động với một số giá trị của keyboardType chứ không phải toàn bộ. Vì vậy, để hiển thị dạng password thì mình phải chuyển giá trị của keyboardType thành default thay vì email-address như trên.

<TextInput
  secureTextEntry
  keyboardType="default" // <= magic happened here
  placeholder="Password"
  underlineColorAndroid='transparent'
  style={styles.input}
/>

Sau khi tìm hiểu thêm thì mình con biết là ngoài giá trị email-address ra thì secureTextEntry còn không thể hoạc động với các giá trị khác như phone-padmultiline={true}

Reference:

JulianDong 25-10-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Julian Dong

2 bài viết.
10 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
24 6
Giới thiệu chung Devdocs là một tài liệu rất hữu ích cho lập trình viên dùng để tra cứu các API của các ngôn ngữ lập trình hay các framework cũng ...
Julian Dong viết 4 năm trước
24 6
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 1 năm trước
0 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
10 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!