Добавьте копию в буфер обмена в вашем приложении React Native
Здравствуйте, разработчики React Native .. !!
В разработке мобильных приложений, когда вы имеете дело с полем ввода текста. Вы часто хотите, чтобы у пользователя была возможность вставить текст в область ввода текста. Работа с функцией копирования и вставки является важным аспектом. Как будто где-то вы видели хорошую цитату и хотите опубликовать ее на своей временной шкале. Итак, вам просто нужно скопировать оттуда и вставить сюда. Итак, давайте создадим мобильное приложение с использованием response native expo, в котором вы предоставляете функции копирования и вставки или можете передать пользователю функции копирования из буфера обмена. Займите свое место, выпейте чашку кофе и приступим к работе.
Настройка и установка
1. Создайте каталог и перейдите к нему.
2. Откройте окно терминала или командной строки и выполните команду: expo init Clipboard
3. Выберите первый пустой шаблон и продолжите загрузку.
4. После завершения загрузки перейдите в каталог «Буфер обмена»
5. Установите пакет с помощью команды: npm install expo-clipboard
Вы увидите что-то подобное после всех 5 шагов. Пока игнорируйте предупреждение о сообщении. Мы закончили установку, теперь приступим к написанию кода.
Код копирования в буфер обмена
Откройте этот проект в вашем любимом текстовом редакторе и проверьте установленный пакет в файле «package.json». По вашему усмотрению, вы можете разместить функции копирования и вставки в другом разделе вашего проекта. Но в качестве демонстрации мы будем работать в файле App.js.
App.js
import * as React from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; import Clipboard from 'expo-clipboard'; export default function App() { const [copiedText, setCopiedText] = React.useState(''); const fetchCopiedText = async () => { const text = await Clipboard.getStringAsync(); setCopiedText(text); }; return ( <View style={styles.container}> <Button title="Paste" onPress={fetchCopiedText} /> <Text style={styles.copiedText}>{copiedText}</Text> </View> ); }
Сначала мы импортируем все необходимые пакеты. Затем в приложении Function () мы используем концепцию перехватчиков для копирования текста. Пользователи обычно копируют текст удаленно, поэтому мы использовали функцию асинхронного обратного вызова «fetchCopiedText». Наконец, мы возвращаем их в простом формате. Вы настраиваете пользовательский интерфейс. Но пока давайте будем простыми. Просто скопируйте откуда-нибудь текст и нажмите кнопку «ВСТАВИТЬ». Затем вы увидите, что он появится на экране.
Добавьте немного стиля.
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, copiedText: { marginTop: 10, color: 'black', padding:10, }, });
На этом мы закончили с нашей частью кода. Теперь просто запустите этот проект.
Откройте терминал или окно командной строки в папке с буфером обмена и выполните команду: npm start
Откройте приложение expo в вашем Android, а также в IOS, поскольку эта функция поддерживается в устройствах IOS и Android. Отсканируйте QR-код, появляющийся на экране окна, и проверьте эту функцию.
Например, я просто скопировал цитату из Интернета и нажал кнопку вставки в этом приложении expo. На экране отображается что-то подобное.
Если вы обнаружите какие-либо трудности, дайте мне знать в разделе комментариев.
Спасибо