Sử dụng props secureTextEntry trong React Native Android
TIL
744
react-native
9
android
52
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

5 bài viết.
17 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 hơn 4 năm trước
24 6
White
3 3
Xin chào mọi người, bài viết hôm nay sẽ liên quan đến một công cụ quản lý source code vô cùng quen thuộc đối với developer hiện nay đó chính là Git...
Julian Dong viết 13 ngày trước
3 3
White
2 0
Hello, bài viết hôm nay mình sẽ giới thiệu đến mọi người một khái niệm của React được giới thiệu trong phiên bản 16.6 đó chính là React.memo. (Ảnh...
Julian Dong viết 21 ngày trước
2 0
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 gần 2 năm trước
0 4
White
3 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 1 năm trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
17 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á!