Создание форм входа и регистрации в приложении React Native включает поля ввода и кнопки. Одним из полей, которое вы часто будете добавлять в эти формы, является поле пароля. Это поле пароля состоит из использования компонента TextInput
React Native.
Обычное поведение этого поля заключается в том, чтобы скрыть пароль пользователя за непонятными символами.
Взгляните на пример компонента TextInput
, который используется для создания поля пароля.
import React, { useState } from 'react'; import { StyleSheet, TextInput, View } from 'react-native'; export default function App() { const [password, setPassword] = useState(''); return ( <View style={styles.container}> <View style={styles.inputContainer}> <TextInput style={styles.inputField} name='password' placeholder='Enter password' autoCapitalize='none' autoCorrect={false} textContentType='newPassword' secureTextEntry value={password} enablesReturnKeyAutomatically onChangeText={text => setPassword(text)} /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5EEDC', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 12 }, inputContainer: { backgroundColor: 'white', width: '100%', borderRadius: 8, flexDirection: 'row', alignItems: 'center', borderWidth: 4, borderColor: '#d7d7d7' }, inputField: { padding: 14, fontSize: 22, width: '90%' } } });
Он использует реквизит secureTextEntry
, так что когда текстовое значение вводится в поле ввода, непонятно, что вводится в это поле.
Вот вывод приведенного выше фрагмента на устройстве:
Тем не менее, предоставление пользователю возможности видеть текущее значение, которое он вводит, может привести к хорошему опыту и может быть необходимо в некоторых случаях.
Показать или скрыть хук паролей
Чтобы добавить возможность показывать или скрывать видимость поля пароля, давайте создадим собственный хук в новом файле с именем useTogglePasswordVisibility.js.js
.
Начните с импорта хука useState
из библиотеки React. Вам нужно будет создать две разные переменные состояния для переключения между видимостью поля и изменением значка.
Затем определите функцию с именем useTogglePasswordVisibility
. Внутри этой функции создайте две новые переменные состояния. Первый называется passwordVisibility
. Его начальное значение установлено на логическое значение true
. Причина в том, что эта переменная будет значением реквизита secureTextEntry
компонента TextInput
. Вы хотели бы изначально скрыть поле пароля, когда пользователь вводит пароль в поле ввода.
Вторая определенная переменная состояния называется rightIcon
. Он имеет значение по умолчанию eye
. Это значение зависит от библиотеки значков, которую вы используете в своем приложении React Native. В этом примере я использую MaterialCommunityIcons от Expo Vector Icons.
export const useTogglePasswordVisibility = () => { const [passwordVisibility, setPasswordVisibility] = useState(true); const [rightIcon, setRightIcon] = useState('eye'); // ... };
Затем добавьте метод с именем handlePasswordVisibility
, который позволит пользователю приложения переключать видимость поля пароля между отображаемым и скрытым состоянием.
Наконец, не забудьте вернуть все переменные и метод обработчика.
export const useTogglePasswordVisibility = () => { const [passwordVisibility, setPasswordVisibility] = useState(true); const [rightIcon, setRightIcon] = useState('eye'); const handlePasswordVisibility = () => { if (rightIcon === 'eye') { setRightIcon('eye-off'); setPasswordVisibility(!passwordVisibility); } else if (rightIcon === 'eye-off') { setRightIcon('eye'); setPasswordVisibility(!passwordVisibility); } }; return { passwordVisibility, rightIcon, handlePasswordVisibility }; };
Используйте ловушку видимости пароля
Начните с обновления операторов импорта в файле App.js
:
import React, { useState } from 'react'; import { StyleSheet, Pressable, TextInput, View } from 'react-native'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import { useTogglePasswordVisibility } from './hooks/useTogglePasswordVisibility';
Затем получите доступ к необходимым переменным и методу из хука useTogglePasswordVisibility
. Добавьте следующую строку вверху компонента App
:
export default function App() { const { passwordVisibility, rightIcon, handlePasswordVisibility } = useTogglePasswordVisibility(); const [password, setPassword] = useState(''); // ... }
Измените свойство компонента TextInput
. Обязательно добавьте passwordVisibility
в качестве значения свойства secureTextEntry
.
<TextInput secureTextEntry={passwordVisibility} // ... rest of the props remain unchanged />
Внутри компонента View
, обертывающего TextInput
, добавьте кнопку, используя компонент Pressable
. Эта кнопка позволит пользователю переключаться между скрытым и отображаемым состоянием поля пароля.
Эта кнопка оборачивает компонент значка.
<View style={styles.inputContainer}> {/* After TextInput component */} <Pressable onPress={handlePasswordVisibility}> <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" /> </Pressable> </View>
Вот и все! Вот результат после этого шага:
Вот полный код файла App.js
:
import React, { useState } from 'react'; import { StyleSheet, Pressable, TextInput, View } from 'react-native'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import { useTogglePasswordVisibility } from './hooks/useTogglePasswordVisibility'; export default function App() { const { passwordVisibility, rightIcon, handlePasswordVisibility } = useTogglePasswordVisibility(); const [password, setPassword] = useState(''); return ( <View style={styles.container}> <View style={styles.inputContainer}> <TextInput style={styles.inputField} name="password" placeholder="Enter password" autoCapitalize="none" autoCorrect={false} textContentType="newPassword" secureTextEntry={passwordVisibility} value={password} enablesReturnKeyAutomatically onChangeText={text => setPassword(text)} /> <Pressable onPress={handlePasswordVisibility}> <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" /> </Pressable> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5EEDC', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 12 }, inputContainer: { backgroundColor: 'white', width: '100%', borderRadius: 8, flexDirection: 'row', alignItems: 'center', borderWidth: 4, borderColor: '#d7d7d7' }, inputField: { padding: 14, fontSize: 22, width: '90%' } });
- Исходный код в этом репозитории GitHub 🐙
- Посмотрите другие сообщения в блоге, — написал я на React Native и Expo 📄
- Скажи привет в Твиттере 👋
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.