Jak stylizować TextInput w reakcji natywnej na wprowadzanie hasła

105

Mam TextInput. Zamiast pokazywać faktycznie wprowadzony tekst, chcę, aby wyświetlały się gwiazdki (****), gdy użytkownik wprowadza tekst. Jak mogę to zrobić?

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

react-native

— bwbrowning
źródło

332

Gdy zadano to pytanie, nie można było tego zrobić natywnie, jednak zostanie to dodane podczas następnej synchronizacji zgodnie z tym żądaniem ściągnięcia. Oto ostatni komentarz do żądania ściągnięcia - „Wylądował wewnętrznie, zostanie wysłany przy następnej synchronizacji”

Po dodaniu będziesz mógł zrobić coś takiego

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

refs

— Riley Bracken
źródło

dzięki, więc dopóki to nie zostanie połączone, jakie są inne opcje? Domyślam się, że Facebook robi coś podobnego do logowania się do własnych aplikacji.

— bwbrowning

1

Szukałem tego dzisiaj, w ten sposób znalazłem to żądanie ściągnięcia. Mówią, że mają tylko 2 aplikacje, które są w 100% natywne. Aplikacja F8 otwiera nowe okno z prośbą o autoryzację. Reklamy na Facebooku mają funkcjonalność, której szukamy, ale wydaje mi się, że dodali do niej Objective-C. Innym sposobem na zrobienie tego byłoby przechowywanie łańcucha i za każdym razem, gdy aktualizacja wejścia zamienia ostatni znak na… rzeczy :).

— Riley Bracken

@bwbrowning, powinno wkrótce zostać scalone; założę się, że na długo przed wdrożeniem.

— Brigand

Podoba mi się to, ponieważ ma tekst, więc mogę skopiować z niego wklej. XD

— Jovylle Bermudez

25

Maj 2018 React-natywna wersja 0.55.2

secureTextEntry = {true} działa

hasło = {true} nie działa

— mediaguru
źródło

11

Po prostu dodaj poniższy wiersz do <TextInput>

secureTextEntry={true}

— Hashini
źródło

6

Musiałem dodać:

secureTextEntry={true}

Wraz z

password={true}

Od 0,55

— NicholasByDesign
źródło

2

nie potrzebujesz hasła = {true}

— KetZoomer

6

Dodaj

secureTextEntry={true}

Lub tylko

secureTextEntry

właściwość w TextInput.

Przykład roboczy:

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

— user274294
źródło

4

TextInput musi zawierać secureTextEntry = {true}, pamiętaj, że dokumenty React stwierdzają, że nie możesz używać multiline = {true} w tym samym czasie, ponieważ ta kombinacja nie jest obsługiwana.

Możesz także ustawić textContentType = {'password'}, aby pole mogło pobierać dane uwierzytelniające z pęku kluczy przechowywanego w telefonie komórkowym, co stanowi alternatywny sposób wprowadzania danych uwierzytelniających, jeśli masz dane biometryczne w telefonie komórkowym, aby szybko je wstawiać. Na przykład FaceId na iPhonie X lub dotykowe wprowadzanie odcisków palców w innych modelach iPhone'a i Androida.

 <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
źródło

3

Mały plus:

version = RN 0.57.7

secureTextEntry={true}

nie działa, gdy keyboardTypebył "phone-pad"lub"email-address"

— qloveshmily
źródło

2

Możesz pobrać przykład i przykładowy kod na oficjalnej stronie, w następujący sposób:

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

Źródła: http://facebook.github.io/react-native/docs/textinput.html

— Richard Li
źródło

2

Tak, też to widziałem. Ale dla mnie to tylko praca z secureTextEntry={true} .

— namxam

Po prostu zaktualizuj do najnowszej stabilnej (0.8.0) i password={true}będzie działać.

— Daniel Pecher,

0

Używam 0.56RC secureTextEntry = {true} Wraz z hasłem = {true} to działa tylko, jak wspomniał @NicholasByDesign

— Ramusan
źródło