Как вы стилизуете TextInput в React Native для ввода пароля

103

У меня есть TextInput. Вместо отображения фактического введенного текста я хочу, чтобы он отображал звездочки (****), когда пользователь вводит текст. Как я могу это сделать?

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

react-native

— пухлый
источник

321

Когда об этом спросили, не было возможности сделать это изначально, однако это будет добавлено при следующей синхронизации в соответствии с этим запросом на перенос. Вот последний комментарий к запросу на перенос: «Приземлился внутри, будет отключен при следующей синхронизации».

Когда он будет добавлен, вы сможете сделать что-то вроде этого

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

реф.

— Райли Брэкен
источник

спасибо, так что, пока это не будет объединено, какие еще варианты есть? Я предполагаю, что facebook делает что-то подобное для входа в свои собственные приложения.

— bwbrowning

1

Я изучал это сегодня, вот как я нашел тот запрос на перенос. Они говорят, что у них всего 2 приложения, которые на 100% являются React Native. Приложение F8 открывает новое окно с запросом авторизации. Facebook Ads обладает той функциональностью, которую мы ищем, но я почти думаю, что они обернули для нее Objective-C. Другой способ сделать это - сохранить строку и каждый раз при обновлении ввода заменять последний символ на ... материал :).

— Райли Брэкен

@bwbrowning, скоро его следует объединить; задолго до того, как вы начнете ставить

— Brigand

Мне это нравится, потому что в нем есть текст, поэтому я могу скопировать из него вставку. XD

— Джовилль Бермудес

25

Реагировать на версию 0.55.2, май 2018 г.

secureTextEntry = {true} работает

пароль = {true} не работает

— mediaguru
источник

11

Просто добавьте строку ниже в <TextInput>

secureTextEntry={true}

— Хашини
источник

6

Пришлось добавить:

secureTextEntry={true}

Вместе с

password={true}

По состоянию на 0,55

— НиколайByDesign
источник

2

пароль не нужен = {true}

— KetZoomer

6

Добавить

secureTextEntry={true}

или просто

secureTextEntry

свойство в вашем TextInput.

Рабочий пример:

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

— user274294
источник

4

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

Вы также можете установить textContentType = {'password'}, чтобы поле могло извлекать учетные данные из связки ключей, хранящейся на вашем мобильном телефоне, альтернативный способ ввода учетных данных, если вы получили биометрические данные на своем мобильном телефоне, чтобы быстро вставить учетные данные. Например, 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}будет работать.

— Daniel Pecher

0

Я использую 0.56RC secureTextEntry = {true} вместе с password = {true}, тогда только он работает, как указано @NicholasByDesign

— Рамузан
источник