时间戳

首页 > 解决方案 > 如何将 FlatList 文本项复制到剪贴板 onPress

javascript - 如何将 FlatList 文本项复制到剪贴板 onPress

问题描述

因为我是 React Native 的新手，所以我会尽可能详细地说明这一点，也许这也会对其他人有所帮助✨。

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

我要做的是：当用户点击 FlatList 中的任何项目时，被点击的项目被复制到剪贴板，并显示一个警报，确认它已被复制。

现在发生了什么：每个项目都是可点击的，并且在 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"
  }
});

认为答案可能很明显，但非常感谢任何帮助！

标签： javascriptreact-native

解决方案

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

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

并在你调用它的地方传递那个参数。

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

推荐阅读