Итак, мне снова нужен текстовый ввод, который увеличивается, когда контент растет за пределами поля ввода. Я создал настраиваемый модуль ввода текста с автоматическим увеличением размера React Native. Позвольте мне провести вас через весь процесс.
Во-первых, давайте импортируем в наш код TextInput по умолчанию React Native.
Внутри состояния нашего компонента мы определим два свойства: значение и высоту. значение, содержащее значение TextInput и высоту для управления высотой TextInput.
Давайте извлечем эти значения из состояния.
Прежде всего используйте TextInput внутри вашего компонента.
Мы собираемся использовать свойство onContentSizeChange, предоставляемое TextInput, чтобы следить за полем ввода на предмет изменений размера содержимого и, соответственно, вызывать нашу функцию updateSize, которая обновит высоту. нашего TextInput.
В процессе рендеринга мы собираемся использовать высоту, чтобы создать новый стиль, который будет использоваться с нашим TextInput.
Наша функция updateSize принимает новую высоту и обновляет состояние, чтобы сохранить новую высоту.
А вот и полный исходный код.
Вот как мы создали автоматически растущий TextInput для react-native без использования какой-либо внешней библиотеки.
Привет, меня зовут Манодж Сингх Неги. Я разработчик Javascript, и я подписываюсь на меня в Twitter или Github.
Я готов публично выступить или устроить встречу, позвони мне по адресу [email protected], если хочешь встретиться со мной.
Вам действительно понравилась эта статья?
Пожалуйста, подпишитесь на мой блог. Вы будете часто получать подобные статьи прямо в свой почтовый ящик.
Вот другие статьи для вас.
- Функция дросселирования в javascript на примере
- Объяснение API контекста React
- Введение в диапазоны Haskell
- Объяснение HOC (компонентов высшего порядка) в ReactJS
Мир
