如何使用React Native Part＃9构建WordPress客户端应用程序：实现简单共享-CSDN博客

在这里，我们将添加共享按钮并实现其功能。该功能使按下共享按钮时，文章可以共享到社交媒体帐户。为此，我们将使用react-native包中的Share组件。

因此，我们需要从react-native包中导入Share和TouchableOpacity组件，如下面的代码片段所示：

import {
  View,
  ScrollView,
  ActivityIndicator,
  Dimensions,
  Share,
  TouchableOpacity,
} from 'react-native' ;

然后，我们需要定义一个onShare函数，如下面的代码片段所示：

onShare = async (title, uri) => {
    Share.share({
      title : title,
      url : uri,
    });
  };

在这里，我们使用了Share组件中的share方法，并提供了文章的标题和url作为参数。

现在，我们需要在“作者”部分的右侧添加共享按钮。为此，我们需要使用以下代码片段中的代码：

<List.Item
 title={ ` ${post[ 0 ]._embedded.author[ 0 ].name} ` }
 description={ ` ${post[ 0 ]._embedded.author[ 0 ].description} ` }
  right={props => {
   return (
     < TouchableOpacity
       onPress = {() =>
         this.onShare(post[0].title.rendered, post[0].link)
       }>
        <FontAwesome name="share" size={30} />
     </TouchableOpacity> 
   );
 }}

在这里，我们使用了List组件的正确属性来返回共享按钮的模板。 Share按钮模板包含TouchableOpacity它包装组件FontAwesome与共享图标组件。该onShare函数被调用的的onPress事件TouchableOpacity组件。我们还需要记住从vector-icons包中导入FontAwesome 图标包：

import FontAwesome from 'react-native-vector-icons/FontAwesome' ;

因此，我们将在仿真器中获得以下结果：

如我们所见，当我们单击共享按钮时，该按钮上会出现一个模式，使我们能够与社交帐户共享文章。

摘要

在本章中，我们学习了如何使用react-native包中的Share组件来实现share按钮。然后，我们还学习了如何配置“ Share组件，以便在屏幕上弹出共享屏幕。为了显示共享屏幕，我们使用了Share组件提供的share（）函数。这使我们可以将文章分享到社交帐户。最后，我们也使用矢量图标实现了共享按钮。

本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。由于我的博客谈论的是本机反应，因此该系列和文章相互联系。我们将学习如何设置许多使我们的生活舒适的程序包，并学习如何处理WordPress API。在此，本书中讨论的最突出的功能是深色主题，脱机模式，无限滚动等。您可以在本系列中找到更多。本教程系列的灵感来自instamobile的React Native App模板

From: https://hackernoon.com/build-wordpress-client-app-with-react-native-9-implement-simple-share-8r1vs326d