Добавьте копию в буфер обмена в вашем приложении 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. На экране отображается что-то подобное.

Если вы обнаружите какие-либо трудности, дайте мне знать в разделе комментариев.

Спасибо