如何使用React Native Part＃15构建WordPress应用：将消息转发到收件箱

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

我们将使用云功能将邮件转发到电子邮件收件箱。 在这里，将初始化云功能。 重要的是我们应该在项目之外的某个地方对其进行初始化，因为这会产生node_module冲突。 现在，为了实现它，我们需要在项目中安装firebase-tools 。 因此，我们可以在命令提示符下使用以下命令进行安装：

npm install -g firebase-tools

然后，我们需要运行firebase登录以使用以下命令进行身份验证：

firebase login

然后，我们可以使用以下命令启动一个新项目：

firebase init functions

因此，我们的项目结构将显示为下一页的屏幕快照所示：

现在，我们需要转到“ ./functions ”目录的index.js 。 然后，我们需要导入nodemailler模块以发送电子邮件，如下面的代码片段所示：

const nodemailer = require ( 'nodemailer' );

接下来，我们需要配置实例进行演示。 我们可以使用Gmail轻松进行设置。 但是也可以使用其他服务，例如Sendgrid或Mailerlite。 下面的代码段提供了该实现：

const gmailEmail = 'your send email' ;
    const gmailPassword = 'your email' ;
    const mailTransport = nodemailer.createTransport({
      service : 'gmail' ,
      auth : {
        user : gmailEmail,
        pass : gmailPassword,
      },
    });

接下来，我们需要定义一个触发器。 每当将新节点添加到联系人时，它将触发onCreate并获取传入的快照。 为此，我们可以使用以下代码片段中的代码：

  exports.sendEmailConfirmation = functions.database
      .ref( '/contact/{contact_id}' )
      .onCreate( async (snapshot, context) => {
    }

ref提供了进一步的解释，如下面的代码片段所示：

.ref( '/contact/{contact_id}' )

在这里，我们将为访问自动生成的ID添加前缀{contact_id} ，如下面的代码片段所示：

   exports.sendEmailConfirmation = functions.database
      .ref( '/contact/{contact_id}' )
      .onCreate( async (snapshot, context) => {
        const val = snapshot.val();
        const mailOptions = {
          from : 'your sending email' ,
          to : 'your receiving email' ,
          subject : 'Hey new message from ' + val.name,
          html : '<b>' + val.message + '</b>' ,
        };
        try {
          await mailTransport.sendMail(mailOptions);
          console .log( `New ${val.message ? '' : 'un' } message sent to:` , val.email);
        } catch (error) {
          console .error( 'There was an error while sending the email:' , error);
        }
        return null ;
      });

我们可以使用val（）获得快照值。 然后，我们可以将其分配给mail对象，并使用mailTransport发送电子邮件。

现在，我们需要运行以下命令：

firebase deploy

因此，当我们进入Firebase控制台时，我们将获得以下结果：

我们可以在这里看到我们的功能。

接下来，我们需要返回到应用程序并再次点击保存消息，这将显示以下日志结果：

在这里，我们可以看到已发送日志显示电子邮件。

然后，我们可以在以下设备中看到收到的电子邮件：

防止多次提交

在这里，我们将防止用户多次提交联系表。 为此，我们将使用momentjs 。 使用moment.js，我们获取提交时间并保存到AsyncStorage 。 然后，当用户提交表单时，我们将隐藏表单并通知用户已达到提交限制。

首先，我们需要导入所需的软件包，如下面的Contact.js文件中的代码片段所示：

 import AsyncStorage from '@react-native-community/async-storage' ;
    import moment from 'moment' ;

然后，我们需要再次配置handleSubmit函数，如下面的代码片段所示：

    getSubmitDuration = async () => {
        let now = moment();
        await AsyncStorage.getItem( 'submit_time' ).then( submit_time => {
          let diff = moment.duration(now.diff(moment(submit_time))).asMinutes();
          console .log(diff);
          if (diff <= 60 ) {
            this .setState({ block_submit : true });
          }
        });
      };

在这里，我们将提交时间保存到存储中。

然后，我们将创建函数以获取并计算块持续时间。 下面的代码段提供了该功能的整体实现：

 render() {
        if ( this .state.block_submit) {
          return (
            < View style = {{flex:1,justifyContent: ' center ', alignItems: ' center ',}}>
               <Image
                style={{width: 100, height: 100}}
                source={require('../assets/block.png')}
              />
              <Text style={{fontSize:25}}>Your can submit again in next hour</Text>
            </View> 
          );
        } else {
          return (
             <View style={styles.container}>
              <Form
                type={ContactForm}

在这里，我们在每次屏幕加载时都使用该条件。 为此，我们将调用该函数为componentDidMount挂钩，如下面的代码片段所示：

   async componentDidMount() {
        this .getSubmitDuration();
      }

现在，现在无法在联系人屏幕中发送保存按钮了。 如果超过限制，我们将在下一页的仿真器屏幕中获得以下结果：

摘要

在本章中，我们介绍了如何在react本机应用程序中设置react-native-firebase 。然后，我们学习了如何使用tcomb-form-native包中的组件来在Contact屏幕中实现表单。 然后，我们实现了将消息发送到Firebase。 我们还使用了Firebase工具包，以将消息转发到电子邮件。 然后，我们防止了“联系人”屏幕中“保存”按钮的垃圾邮件以及设置限制。

From: https://hackernoon.com/build-wordpress-app-with-react-native-15-forwarding-message-to-inbox-to4uj32da