Sử dụng props secureTextEntry trong React Native Android
TIL
719
react-native
8
android
50
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 gần 4 năm trước
24 6
Bài viết liên quan
White
1 0
Tôi đã gặp vấn đề với việc đồng bộ danh bạ trên chiếc Samsung Galaxy S6 Edge của khi bật chế độ tiết kiệm pin. Sau khi tìm kiếm 1 lúc, tôi đã tìm r...
Lương Trưởng viết 7 tháng trước
1 0
White
10 2
(Link) (Link) &mdash; tracks device battery state. (Link) (Link) &mdash; tracks geo location state of user's device. (Link) (Link) &mdash; tr...
Đinh Viễn viết 1 tháng trước
10 2
{{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á!