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

خواندن از کلیپ‌بورد و نوشتن بر روی آن در 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!');
};

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