如何将FlatList文本项复制到Clipboard onPress

时间:2019-04-25 19:39:03

标签: javascript react-native

由于我是React Native的新手,因此我将尽可能详细地介绍它,也许这也会对其他人有所帮助。

我正在使用React Native Super Grid库,该库在内部使用FlatList和SectionList来呈现网格布局。网格是通过来自单独const的props填充文本的。

我要执行的操作是::当用户点击FlatList中的任何项目时,被点击的项目将被复制到剪贴板,并显示一条警报,确认已被复制。 / p>

当前正在发生的事情:每个项目都是可轻敲的,并且正确的警报会显示在onPress确认您已复制到剪贴板,但实际上没有任何内容写入剪贴板。为了确保writeToClipboard正常工作,我在其中有一条静态消息,上面写着“至少可以使剪贴板工作正常”,因此,如果您轻按任何一项,则该静态消息将被成功复制到剪贴板。我只是不确定如何将点击的特定项目复制到剪贴板。

以下是网格组件的代码:

import React, { Component } from "react";
import {
  StyleSheet,
  Alert,
  View,
  Text,
  TouchableOpacity,
  Clipboard,
  Button,
  onPress
} from "react-native";
import { FlatGrid } from "react-native-super-grid";

class Emojigrid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "WELL AT LEAST THE CLIPBOARD WORKS",
      clipboardContent: null
    };
  }

  writeToClipboard = async () => {
    await Clipboard.setString(this.state.text);
    alert("Boom, Copied");
  };

  render() {
    return (
      <FlatGrid
        itemDimension={130}
        items={items}
        style={styles.gridView}
        // staticDimension={300}
        // fixed
        spacing={2}
        renderItem={({ item, index }) => (
          <View style={[styles.itemContainer, { backgroundColor: "#F7F7F7" }]}>
            <TouchableOpacity onPress={this.writeToClipboard}>
              <Text style={styles.itemName}>{item.name}</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    );
  }
}

export default Emojigrid;

const items = [
  { name: "¯_(ツ)_/¯" },
  { name: "ʕ·͡ᴥ·ʔ" },
  { name: "•`_´•" },
];

const styles = StyleSheet.create({
  gridView: {
    marginTop: 0,
    marginBottom: 400,
    flex: 1
  },
  itemContainer: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 0,
    height: 125
  },
  itemName: {
    fontSize: 18,
    color: "black",
    fontWeight: "400"
  }
});

认为答案可能很明显,但是任何帮助都将不胜感激!

1 个答案:

答案 0 :(得分:1)

您的writeToClipboard函数需要接受一个参数。

writeToClipboard = async (text) => {
  await Clipboard.setString(text);
  alert("Boom, Copied");
};

并将该参数传递给调用它的位置。

<TouchableOpacity onPress={() => this.writeToClipboard(item.name)}>