当用户单击共享按钮时，我想共享此 JSON 数据答案

【问题标题】：I want to share this JSON DATA when user click on share button当用户单击共享按钮时，我想共享此 JSON 数据
【发布时间】：2021-04-21 02:16:45
【问题描述】：

这是 JSON 数据

{
  "sad": [
    { "id": "1", "title": "hello this is no.1" },
    {
      "id": "2",
      "title": "आँखें थक गई है आसमान को देखते देखते पर वो तारा नहीं टूटता ,जिसे देखकर तुम्हें मांग लूँ"
    },
    {
      "id": "3",
      "title": "मेरी हर आह को वाह मिली है यहाँ…..,कौन कहता है दर्द बिकता नहीं है !"
    },
    {
      "id": "4",
      "title": "तुझसे अच्छे तो जख्म हैं मेरे । उतनी ही तकलीफ देते हैं जितनी बर्दास्त कर सकूँ"
    },
    {
      "id": "5",
      "title": "रुठुंगा अगर तुजसे तो इस कदर रुठुंगा की ये तेरीे आँखे मेरी एक झलक को तरसेंगी !!"
    },
    {
      "id": "6",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    },
    {
      "id": "7",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    },
    {
      "id": "8",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    },
    {
      "id": "9",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    }
  ]
}

这是我的代码，我想知道当用户按下共享按钮时我应该如何共享这些特定数据

这里我导入了所有的库

import React, { Component, useState, useEffect } from "react";
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  ListView,
  TouchableOpacity,
  Share,
} from "react-native";
import Icon from "react-native-vector-icons";
import SadJson from "./sad.json";

var d = SadJson.sad;

const sad = ({ navigation }) => {
  const [data, setData] = useState([]);

  // This is share method code
  const onShare = async () => {
    try {
      const result = await Share.share({
        message: data.toString(d),
      });
    } catch (error) {
      alert(error.message);
    }
  };

  useEffect(() => {
    setData(d);
  });

  // This is return section where I use Flatlist for show Data
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        removeClippedSubviews={false}
        renderItem={({ item }) => (
          <View>
            <Text>
              {item.id}
              {item.title}
            </Text>

            <View style={{ flexDirection: "row" }}>
              <TouchableOpacity style={styles.sharebtn} onPress={onShare}>
                <Text>Share{item.id}</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.sharebtn}>
                <Text>Copy</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
    </View>
  );
};

// This is Style section
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
  },

  sharebtn: {
    width: 60,
    height: 30,
    padding: 5,
    backgroundColor: "#2BDB25",
    borderRadius: 10,
  },
  btntext: {
    textAlign: "center",
  },
});

export default sad;

请帮助我，请让我知道如何在社交媒体或任何其他应用上分享这些数据

【问题讨论】：

标签： javascript reactjs react-native react-native-android react-native-shared-element

【解决方案1】：

如果我正确理解您的问题，您想分享来自data 状态的特定数据元素。要将特定对象从您的data 传递给Share.share，那么我建议您将整个 item 对象从FlatList 中的映射回调传递给您的onShare 处理程序。 p>

更新onShare 以使用item 对象。此外，由于您实际上并未使用 awaited on 返回值，因此此函数可能不需要为 async（如果您确实使用 await 值以供以后使用，则可以将其添加回来）。

const onShare = item => {
  try {
    const result = await Share.share({
      message: item,
    });
  } catch (error) {
    alert(error.message);
  }
};

并将item 传递给回调

<TouchableOpacity
  style={styles.sharebtn}
  onPress={() => onShare(item)} // <-- pass item to callback
>
  <Text>Share{item.id}</Text>
</TouchableOpacity>

另一个建议 - 由于您的数据是静态的，因此不需要从 useEffect 钩子填充您的状态，特别是因为该效果没有任何依赖关系和更新状态，除非您有复制/粘贴问题，正如所写的那样，这个效果看起来应该触发渲染循环。您可以使用初始值填充您的状态。

const d = SadJson.sad;
...
const [data, setData] = useState(d); // <-- initialize state with the imported JSON data

【讨论】：