اساس React Native: کپی در کلیپ‌بورد

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 16 شهریور 1397
دسته بندی ها : جاوا اسکریپت

خواندن از کلیپ‌بورد و نوشتن بر روی آن در React با استفاده از اِی‌پی‌آی Clipboard بسیار آسان است. در این آموزش مختصر، یک برنامه ساده برای انجام این کار خواهیم ساخت.

شروع برنامه

در جهت ساده نگه داشتن این آموزش، برنامه‌ای کاملا پایه خواهیم ساخت. این برنامه دو دکمه، یک ورودی متن، و بخش‌هایی برای رندر کردن متن دارد.

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: '',
      clipboardContent: null,
    };
  }

  readFromClipboard = () => {
    alert('TODO: Read from Clipboard');
  };

  writeToClipboard = () => {
    alert('TODO: Write to Clipboard')
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.boldText}>Clipboard Contents: </Text>
        <Text>{this.state.clipboardContent}</Text>
        <Button
          onPress={this.readFromClipboard}
          title="Read from Clipboard"
        />

        <View style={styles.seperator} />

        <TextInput
          style={styles.textInput}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
          placeholder="Type here..."
        />
        <Button
          onPress={this.writeToClipboard}
          title="Write to Clipboard"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  boldText: {
    fontWeight: '600',
  },
  seperator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: 'gray',
    width: '80%',
    marginVertical: 40,
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: '80%',
    paddingHorizontal: 10,
  },
});

خواندن از کلیپ‌بورد

فرض کنید که می‌خواهید یک رمز عبور را از کلیپ‌بورد کاربر کپی کنید؛ اما این متن قرار است به ورودی‌ای برود که کاربر نمی‌تواند برای کپی کردن آن صفحه را لمس کرده و نگه دارد، پس در عوض می‌خواهیم یک دکمه ساده برای انجام این کار به اون بدهیم.

در اینجا Clipboard.getString(0 به میان می‌آید. این تابع، یک promise را با یک مقدار یا یک خطا بر می‌گرداند.

در ابتدا، مطمئن شوید که این کار را انجام می‌دهید: import { clipboard } from ‘react-native’;.

می‌توانید به چند روش مختلف promiseها را مدیریت کنید، اما من پیشنهاد می‌کنم که از async / await استفاده کنید؛ زیرا کد شما را کاملا مختصر نگه می‌دارد.

حال همه چیز راه‌اندازی شده است (فشردن دکمه، تابع readFromClipboard را فراخوانی خواهد کرد) و ما می‌توانیم بر روی تعامل با اِی‌پی‌آی Clipboard تمرکز کنیم.

از آنجایی که از async / await استفاده می‌کنیم، باید async را در مقابل تابع خود قرار دهیم.

readFromClipboard = async () => {
  alert('TODO: Read from Clipboard'); 
};

سپس داخل این تابع، مقدار clipboard را دریافت کرده، و در state ذخیره می‌کنیم. از آنجایی که getString یک promise است، باید منتظر مقدار آن بمانیم که می‌توانیم با استفاده از کلمه کلیدی await این کار را انجام دهیم.

readFromClipboard = async () => {  
  const clipboardContent = await Clipboard.getString();  
  this.setState({ clipboardContent });
};

این کار، محتویات کیبورد را زیر «Clipboard Contents»‌ نمایش خواهد داد.

برای آزمایش برنامه، سعی کنید نام یک مخاطب را کپی کرده و در برنامه paste کنید.

نوشتن بر روی کلیپ‌بورد

نوشتن بر روی کلیپ‌بورد هم تقریبا به همین صورت است، پس این مورد را کمی مختصر نشان خواهم داد. وقتی که با موفقیت بر روی کلیپ‌بورد چیزی نوشتیم، این اتفاق را به کاربر اطلاع می‌دهیم.

در ابتدا، با قرار دادن async در مقابل تابع، تابع را مجبور کنید که با await کار کند.

writeToClipboard = async () => {  
  alert('TODO: Write to the Clipboard');
};

سپس می‌خواهیم مقدار موجود در ورودی خود را در کلیپ‌بورد بنویسیم و پس از پایان کار، به کاربر اطلاع دهیم.

writeToClipboard = async () => {
  await Clipboard.setString(this.state.text);
  alert('Copied to Clipboard!');
};

حال ادامه دهید و چیزی را از برنامه خود کپی کنید، و آن را در یک برنامه دیگر پیست کنید؛ یا آن را در کلیپ‌بورد کپی کرده و سپس از طریق کدی که در بخش قبل نوشتیم، بخوانید.

و در اینجا کار ما به پایان می‌رسد. کار با این API بسیار ساده است، اما گاهی اوقات یک مثال می‌تواند کمک خوبی برای شما باشد.

اگر تمایل به یادگیری React Native دارید، می‌توانید دوره مربوطه را در وبسایت Roocket مشاهده کنید:

منبع

مقالات پیشنهادی

راهنمای سریع برای کمک به شما در درک و ساخت برنامه‌های ReactJS

اولین بخش، نحوه ساخت یک برنامه React ساده با استفاده از create-react-app را نشان داده و ساختار پروژه را شرح می‌دهد.بخش دوم یک قطعه کد که از قبل بر روی...

پیاده‌سازی اسکرول کردن نرم در React

آیا نمی‌دانید که اسکرول کردن نرم چیست؟ خب، با استفاده از این قابلیت، به جای این کاربر که بر روی یک دکمه کلیک کند و به سرعت به بخش دیگری از صفحه مشابه...

بهینه‌سازی برنامه‌های React در عمل برای افزایش سرعت

React می‌تواند کند باشد. منظورم این است که هر برنامه React با سایز متوسطی می‌تواند کند به نظر بیاید. اما قبل از این که به دنبال جایگزین بگردید، بهتر ا...

چرا به Context API جدید React نیاز داریم ؟

چندین سال پیش، Context API به عنوان یک ویژگی آزمایشی با هشدار «این API در آینده می‌تواند بشکند» معرفی شد. با توجه به این که Context API آزمایشی بود، ا...