Як ви стилізуєте TextInput у рідній реакції для введення пароля


104

У мене є TextInput. Замість показу фактично введеного тексту, я хочу, щоб він відображав зірочки (****), коли користувач вводить текст. Як я можу це зробити?

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

Відповіді:


322

Коли це було запитано, не було способу зробити це спочатку, проте це буде додано під час наступної синхронізації відповідно до цього запиту на витягування. Ось останній коментар до запиту на витяг - "Приземлений внутрішньо, буде випущений під час наступної синхронізації"

Коли він буде доданий, ви зможете зробити щось подібне

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

посилання


спасибі, тож доки це не об’єднається, які ще варіанти є? Я думаю, facebook робить щось подібне для входів у власні програми.
bwbrowning

1
Я розглядав це сьогодні, ось як я знайшов цей запит на витягування. Вони кажуть, що у них є лише 2 програми, які на 100% реагують рідними. Додаток F8 відкриває нове вікно з проханням авторизації. Facebook Ads має функціональність, яку ми шукаємо, але я майже думаю, що вони обгорнули для цього Objective-C. Інший спосіб зробити це - зберегти рядок і кожного разу, коли вхідні оновлення замінюють останній символ на ... stuff :).
Riley Bracken,

@bwbrowning, його слід об’єднати найближчим часом; задовго до розгортання я б ставлю.
Brigand

Мені це подобається, оскільки в ньому є текст, тому я можу скопіювати з нього пасту. XD
Джовілль Бермудес

25

Травень 2018 р. - рідна версія 0.55.2

secureTextEntry = {true} працює

пароль = {true} не працює



6

Мені довелося додати:

secureTextEntry={true}

Разом з

password={true}

Станом на 0,55


2
вам не потрібен пароль = {true}
KetZoomer

6

Додати

secureTextEntry={true}

або просто

secureTextEntry 

у вашому TextInput.

Робочий приклад:

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

4

TextInput повинен містити secureTextEntry = {true}, зауважте, що документи React стверджують, що ви не повинні одночасно використовувати multiline = {true}, оскільки ця комбінація не підтримується.

Ви також можете встановити textContentType = {'пароль'}, щоб поле могло отримувати облікові дані з брелока, що зберігається на вашому мобільному телефоні, альтернативний спосіб введення облікових даних, якщо у вас є біометричний ввід на вашому мобільному телефоні, щоб швидко вставити облікові дані. Такі як FaceId на iPhone X або сенсорне введення відбитків пальців на інших моделях iPhone та Android.

 <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

Маленький плюс:

version = RN 0.57.7

secureTextEntry={true}

не працює, коли keyboardTypeбуло "phone-pad"або"email-address"


2

Ви можете отримати приклад і зразок коду на офіційному веб-сайті:

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

Довідково: http://facebook.github.io/react-native/docs/textinput.html


2
Так, я теж це бачив. Але для мене це лише робота з secureTextEntry={true} .
namxam

Просто оновіть до останньої стабільної (0.8.0) і password={true}буде працювати.
Даніель Печер,

0

Я використовую 0.56RC secureTextEntry = {true} Поряд з паролем = {true}, тоді працює лише той, як згадував @NicholasByDesign

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.