Bagaimana Anda mengatur gaya TextInput di react native untuk input kata sandi

105

Saya memiliki TextInput. Alih-alih menampilkan teks sebenarnya yang dimasukkan, saya ingin menampilkan tanda bintang (****) saat pengguna memasukkan teks. Bagaimana saya bisa melakukan ini?

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

react-native

— bwbrowning
sumber

331

Ketika ditanya, tidak ada cara untuk melakukannya secara asli, namun ini akan ditambahkan pada sinkronisasi berikutnya sesuai dengan ini permintaan tarik . Berikut adalah komentar terakhir pada permintaan tarik - "Mendarat secara internal, akan keluar pada sinkronisasi berikutnya"

Ketika ditambahkan Anda akan dapat melakukan sesuatu seperti ini

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

ref

— Riley Bracken
sumber

terima kasih, jadi sampai itu digabungkan, opsi apa lagi yang ada? Saya menduga facebook melakukan sesuatu yang mirip untuk login ke aplikasi mereka sendiri.

— bwbrowning

1

Saya memeriksanya hari ini, begitulah cara saya menemukan permintaan tarik itu. Mereka bilang mereka hanya memiliki 2 aplikasi yang 100% React Native. Aplikasi F8 itu membuka jendela baru meminta otorisasi. Iklan Facebook memiliki fungsionalitas yang kami cari, tetapi menurut saya mereka membungkus Objective-C untuknya. Cara lain untuk melakukannya adalah dengan menyimpan string dan setiap kali pembaruan masukan mengganti karakter terakhir dengan ... barang :).

— Riley Bracken

@bwbbning, itu harus segera digabungkan; jauh sebelum Anda menyebarkan, saya berani bertaruh.

— Brigand

Saya suka ini karena memiliki teks sehingga saya dapat menyalin tempel darinya. XD

— Jovylle Bermudez

25

Mei 2018 react-native versi 0.55.2

secureTextEntry = {true} berfungsi

password = {true} tidak berfungsi

— mediaguru
sumber

11

Cukup tambahkan baris di bawah ini ke <TextInput>

secureTextEntry={true}

— Hashini
sumber

6

Saya harus menambahkan:

secureTextEntry={true}

Bersama

password={true}

Mulai 0,55

— NicholasByDesign
sumber

2

Anda tidak perlu password = {true}

— KetZoomer

6

Menambahkan

secureTextEntry={true}

atau hanya

secureTextEntry

properti di TextInput Anda.

Contoh Kerja:

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

— pengguna274294
sumber

4

Sebuah TextInput harus menyertakan secureTextEntry = {true}, perhatikan bahwa dokumen dari React menyatakan bahwa Anda tidak boleh menggunakan multiline = {true} pada saat yang sama, karena kombinasi itu tidak didukung.

Anda juga bisa menyetel textContentType = {'password'} untuk mengizinkan bidang mengambil kredensial dari rantai kunci yang disimpan di ponsel Anda, cara alternatif untuk memasukkan kredensial jika Anda mendapat masukan biometrik di ponsel untuk memasukkan kredensial dengan cepat. Seperti FaceId di iPhone X atau input sentuh sidik jari pada model iPhone dan Android lainnya.

 <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' />

— Tore Aurstad
sumber

3

Sedikit plus:

version = RN 0.57.7

secureTextEntry={true}

tidak bekerja saat keyboardTypeitu "phone-pad"atau"email-address"

— qloveshmily.dll
sumber

2

Anda bisa mendapatkan contoh dan kode contoh di situs resminya, sebagai berikut:

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

Referensi: http://facebook.github.io/react-native/docs/textinput.html

— Richard Li
sumber

2

Ya, saya juga melihat ini. Tapi bagi saya itu hanya bekerja dengan secureTextEntry={true} .

— namxam

Cukup tingkatkan ke stabil terbaru (0.8.0) dan password={true}akan berfungsi.

— Daniel Pecher

0

Saya menggunakan 0.56RC secureTextEntry = {true} Selain password = {true}, hanya berfungsi seperti yang disebutkan oleh @NicholasByDesign

— Ramusesan
sumber