Làm cách nào để bạn tạo kiểu TextInput trong phản ứng gốc để nhập mật khẩu


102

Tôi có một TextInput. Thay vì hiển thị văn bản thực tế đã nhập, tôi muốn nó hiển thị dấu hoa thị (****) khi người dùng nhập văn bản. Tôi có thể làm cái này như thế nào?

<TextInput
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
  onChangeText={(text) => this.setState({input: text})}
/>

Câu trả lời:


319

Khi điều này được hỏi, không có cách nào để thực hiện nó nguyên bản, tuy nhiên điều này sẽ được thêm vào lần đồng bộ hóa tiếp theo theo yêu cầu kéo này . Đây là nhận xét cuối cùng về yêu cầu kéo - "Đã hạ cánh nội bộ, sẽ ra mắt vào lần đồng bộ hóa tiếp theo"

Khi nó được thêm vào, bạn sẽ có thể làm điều gì đó như thế này

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

refs


cảm ơn, vì vậy cho đến khi nó được hợp nhất, có những tùy chọn nào khác? Tôi đoán facebook làm điều gì đó tương tự cho các lần đăng nhập vào ứng dụng của riêng họ.
bwbrown

1
Tôi đã xem xét nó ngày hôm nay, đó là cách tôi tìm thấy yêu cầu kéo đó. Họ nói rằng họ chỉ có 2 ứng dụng 100% là React Native. Ứng dụng F8 nó sẽ mở ra một cửa sổ mới yêu cầu cấp quyền. Quảng cáo Facebook có chức năng mà chúng tôi đang tìm kiếm, nhưng tôi gần như nghĩ rằng họ đã bao bọc Objective-C cho nó. Một cách khác để làm điều đó là lưu trữ chuỗi và mỗi khi cập nhật đầu vào sẽ thay thế ký tự cuối cùng bằng ... thứ :).
Riley Bracken

@bwbrown, nó nên được hợp nhất sớm; rất lâu trước khi bạn triển khai, tôi sẽ đánh cuộc.
Brigand

Tôi thích điều này vì nó có văn bản để tôi có thể sao chép dán từ nó. XD
Jovylle Bermudez

25

Tháng 5 năm 2018 phiên bản gốc phản ứng 0.55.2

secureTextEntry = {true} hoạt động

mật khẩu = {true} không hoạt động


11

Chỉ cần thêm dòng bên dưới vào <TextInput>

secureTextEntry={true}

6

Tôi đã phải thêm:

secureTextEntry={true}

Cùng với

password={true}

Tính đến 0,55


2
bạn không cần mật khẩu = {true}
KetZoomer

6

Thêm vào

secureTextEntry={true}

hoặc chỉ

secureTextEntry 

trong TextInput của bạn.

Ví dụ làm việc:

<TextInput style={styles.input}
           placeholder="Password"
           placeholderTextColor="#9a73ef"
           returnKeyType='go'
           secureTextEntry
           autoCorrect={false}
/>

4

Một TextInput phải bao gồm secureTextEntry = {true}, lưu ý rằng các tài liệu của React nói rằng bạn không được sử dụng multiline = {true} cùng lúc, vì sự kết hợp đó không được hỗ trợ.

Bạn cũng có thể đặt textContentType = {'password'} để cho phép trường truy xuất thông tin đăng nhập từ chuỗi khóa được lưu trữ trên thiết bị di động của bạn, một cách thay thế để nhập thông tin đăng nhập nếu bạn đã nhập sinh trắc học trên điện thoại di động của mình để nhanh chóng chèn thông tin đăng nhập. Chẳng hạn như FaceId trên iPhone X hoặc nhập liệu bằng cảm ứng vân tay trên các mẫu iPhone và Android khác.

 <TextInput value={this.state.password} textContentType={'password'} multiline={false} secureTextEntry={true} onChangeText={(text) => { this._savePassword(text); this.setState({ password: text }); }} style={styles.input} placeholder='Github password' />

3

Một chút cộng:

version = RN 0.57.7

secureTextEntry={true}

không hoạt động khi keyboardTypeđã "phone-pad"hay"email-address"


2

Bạn có thể lấy ví dụ và mã mẫu tại trang web chính thức, như sau:

<TextInput password={true} style={styles.default} value="abc" />

Tham khảo: http://facebook.github.io/react-native/docs/textinput.html


2
Vâng, tôi cũng thấy điều này. Nhưng đối với tôi nó chỉ làm việc với secureTextEntry={true} .
namxam

Chỉ cần nâng cấp lên phiên bản ổn định mới nhất (0.8.0) và password={true}sẽ hoạt động.
Daniel Pecher,

0

Tôi đang sử dụng 0.56RC secureTextEntry = {true} Cùng với mật khẩu = {true} thì chỉ nó hoạt động như được đề cập bởi @NicholasByDesign

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.