Создание форм входа и регистрации в приложении 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%'
  }
});

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.