Accessing a device’s calendar in a React Native app can be a bit tricky. Using open source modules like react-native-add-calendar-event is helpful when you’re looking to show a calendar inside a modal or manipulate calendar events (adding, editing, etc).
在React Native应用程序中访问设备的日历可能会有些棘手。 使用像react-native-add-calendar-event这样的开源模块 当您希望在模式中显示日历或操纵日历事件(添加，编辑等)时，此功能很有用。
In this tutorial, you’re going to cover how to integrate an open source module (react-native-add-calendar-event) in a React Native app to create a custom calendar event add it to the device’s native calendar app.
在本教程中，您将介绍如何在React Native应用程序中集成开源模块( react-native-add-calendar-event )以创建自定义日历事件，将其添加到设备的本机日历应用程序中。
Here’s a look at what you’re going to build:
这是您要构建的内容：
先决条件 (Prerequisites)
Before you begin this tutorial, you’re going to need the following:
在开始本教程之前，您需要满足以下条件：
Node.js version above
12.x.xinstalled on your local machine您本地计算机上安装的Node.js版本高于
12.xxwatchmaninstalledwatchman安装- Access to one package manager such as npm or yarn 访问一位包管理器，例如npm或yarn
React Native version
0.61.xor aboveReact Native版本
0.61.x或更高版本An
iOSorAndroiddevice or simulatoriOS或Android设备或模拟器
For demonstration purposes, this tutorial covers iOS development.
出于演示目的，本教程介绍了iOS开发。
创建一个新的React Native应用 (Create a new React Native app)
Start by creating a new React Native app. After the project directory is generated, make sure to navigate inside it through a terminal and run the following commands to install Cocoapods for iOS development:
首先创建一个新的React Native应用程序。 生成项目目录后，请确保通过终端在其中导航并运行以下命令来安装Cocoapods以进行iOS开发：
After the dependencies have been installed, run the app on a simulator. To do this, you’ll have to build it for the appropriate mobile OS:
安装依赖项后，在模拟器上运行该应用程序。 为此，您必须为相应的移动操作系统构建它：
安装react-native-add-calendar-event (Installing react-native-add-calendar-event)
Next, you’ll need to add the following dependencies to your React Native project. You’re going to install two libraries right now:
接下来，您需要将以下依赖项添加到您的React Native项目中。 您现在将要安装两个库：
react-native-add-calendar-eventto add the calendar event to the native appreact-native-add-calendar-event将日历事件添加到本机应用程序momentto format the date and timemoment格式化日期和时间
Open up a terminal window and execute the below command:
打开一个终端窗口并执行以下命令：
For iOS developers, make sure you install Cocoapods for react-native-add-calendar-event. Run the following command from a terminal window:
对于iOS开发人员，请确保为Cocoapods安装react-native-add-calendar-event 。 从终端窗口运行以下命令：
Add the permissions for the module to work on iOS devices. Add the keys NSCalendarsUsageDescription and NSContactsUsageDescription inside the file ./ios/rncalendarexample_16754/Info.plist, as shown below:
添加该模块的权限以在iOS设备上运行。 添加键NSCalendarsUsageDescription和NSContactsUsageDescription里面的文件./ios/rncalendarexample_16754/Info.plist ，如下图所示：
Make sure to build the app again before running it:
确保在运行之前再次构建该应用程序：
Now you’re good to work on the core elements of the app.
现在，您可以很好地处理应用程序的核心元素了。
Many of the most engaging mobile apps have a secret ingredient — machine learning. Subscribe to the Fritz AI Newsletter to learn how mobile machine learning can elevate your app’s user experience.
许多最吸引人的移动应用程序都有一个秘密成分-机器学习。 订阅Fritz AI新闻简报，了解移动机器学习如何提升应用程序的用户体验。
建立使用者介面 (Building the user interface)
In this section, let’s build the user interface for the app. Start by importing the necessary statements from different open source libraries used to build this app in App.js. Also, be sure to import the necessary core components from the react-native library:
在本节中，让我们为应用程序构建用户界面。 首先从用于在App.js构建此应用程序的不同开源库中导入必要的语句。 另外，请确保从react-native库中导入必要的核心组件：
Next, define a constant that will display the current date and time in UTC mode. Let’s provide a static value for the current date and time for the calendar event, but you can use other modules like @react-native-community/datetimepicker to provide dynamic date and time values.
接下来，定义一个常量，它将以UTC模式显示当前日期和时间。 让我们为日历事件的当前日期和时间提供一个静态值，但是您可以使用@react-native-community/datetimepicker类的其他模块来提供动态日期和时间值。
Then, define a state variable inside the functional component App that will let the user add a custom value for the event name. If the user doesn't add a custom value for the event name, let’s also pass a default name for the event. This is done by using a useState React hook:
然后，在功能组件App中定义一个状态变量，该变量将允许用户为事件名称添加自定义值。 如果用户未为事件名称添加自定义值，那么我们还要传递事件的默认名称。 这是通过使用useState React钩子完成的：
The UI for this demo app is going to contain a title, an input field for the user to enter the name of the calendar event, a date and time string to display the current formatted timestamp, and a button to add the calendar event to the device’s calendar app. The input field is going to set the name of the calendar event to the default name of the event passed using the useState hook.
该演示应用程序的用户界面将包含标题，供用户输入日历事件名称的输入字段，用于显示当前格式时间戳的日期和时间字符串以及用于将日历事件添加到日历中的按钮。设备的日历应用。 输入字段将把日历事件的名称设置为使用useState挂钩传递的事件的默认名称。
Here’s the complete code for the App function so far:
到目前为止，这是App功能的完整代码：
The corresponding style references are created using a StyleSheet object:
使用StyleSheet对象创建相应的样式引用：
If you go back to the simulator, you’re going to get the following result:
如果返回到模拟器，将得到以下结果：
创建日历事件并处理对话框 (Creating a calendar event and handling the dialog)
So far you’ve built the core UI. In this section, let’s add the functionality to access the device’s calendar and add a calendar event in real-time using the React Native app.
到目前为止，您已经构建了核心UI。 在本部分中，让我们添加使用React Native应用程序访问设备日历并实时添加日历事件的功能。
react-native-add-calendar-event module provides a function called AddCalendarEvent that’s promise-based. Through this promise, you can add a new event directly to the calendar app for the mobile platform you’re using.
react-native-add-calendar-event模块提供了一个基于AddCalendarEvent的名为AddCalendarEvent的函数。 通过此承诺，您可以将新事件直接添加到所用移动平台的日历应用程序中。
Using one of the methods of this promise-based function called AddCalendarEvent.presentEventCreatingDialog, you can simply access an editable calendar event directly in our React Native app in the form of a dialog box. However, this method accepts one argument and is an eventConfig object.
使用此基于承诺的函数的方法之一(称为AddCalendarEvent.presentEventCreatingDialog ，您可以直接在我们的React Native应用中以对话框的形式直接访问可编辑日历事件。 但是，此方法接受一个参数，并且是一个eventConfig对象。
This object needs the title of the event, the starting date string of the event, the end date string of the event, and, optionally, you can add a default description in the form of notes.
该对象需要事件的标题，事件的开始日期字符串，事件的结束日期字符串，还可以选择以注释的形式添加默认描述。
To provide a date string to this config object, you need to first convert the current date into a string format. For that, add the below helper method before the App component in App.js:
要向此配置对象提供日期字符串，您需要首先将当前日期转换为字符串格式。 为此，请在App.js的App组件之前添加以下帮助器方法：
This method takes one input, the UTC date stamp, and uses the moment.js library to convert it to the desirable string format required by the calendar app.
此方法采用一个输入(UTC日期戳)，并使用moment.js库将其转换为日历应用程序所需的理想字符串格式。
Go inside the App component and add a helper method called addEventToCalendar.
进入App组件，并添加一个名为addEventToCalendar的辅助方法。
This method accepts two arguments: the name of the event and the date string. Inside this method, you’re also going to configure the eventConfig object and pass it as the argument for the promise-based method AddCalendarEvent.presentEventCreatingDialog().
此方法接受两个参数：事件的名称和日期字符串。 在此方法内，您还将配置eventConfig对象，并将其作为基于AddCalendarEvent.presentEventCreatingDialog()的方法AddCalendarEvent.presentEventCreatingDialog()的参数传递。
The promise handles whether the event is created or if the user has canceled the process of creating the event. This is done using eventInfo, which returns an eventId. You can store this event ID in a state variable and add further functionality, such as editing an existing event in the calendar app (think of this as the challenge of this post).
许诺处理是否创建事件或用户是否取消了创建事件的过程。 这是使用eventInfo完成的，该方法返回eventId 。 您可以将此事件ID存储在状态变量中，并添加其他功能，例如在日历应用程序中编辑现有事件(将其视为这篇文章的挑战)。
Lastly, make sure to add this helper method as the value of onPress on the TouchableOpacity button component in App.js, where you’re returning JSX:
最后，一定要添加这个辅助方法的价值onPress上TouchableOpacity的按钮组件App.js ，在那里你返回JSX：
Now go back to the simulator and try to add a new event. Here’s a demo of the app you’ve built so far that actually stores the calendar event in the calendar app of an iOS device:
现在回到模拟器并尝试添加一个新事件。 这是到目前为止您已构建的应用程序的演示，该应用程序实际上将日历事件存储在iOS设备的日历应用程序中：
You’ll notice that the event id is returned by the promise. In the case of canceling the process of creating a new event, you get a new action from the promise called CANCELLED, as shown below:
您会注意到事件ID是由Promise返回的。 在取消创建新事件的过程的情况下，您将从名为CANCELLED的诺言中获得一个新动作，如下所示：
And that’s it! You can see above that the event has been successfully stored in the native iOS calendar app.
就是这样！ 您可以在上方看到该事件已成功存储在本机iOS日历应用中。
结论 (Conclusion)
The react-native-add-calendar-event package is great. It allows you to add custom events from a React Native app to a device’s native calendar app. Generally this type of feature or functionality is used in hotel rental and flight booking apps, to name just a couple potential use cases.
react-native-add-calendar-event包很棒。 它允许您将自定义事件从React Native应用程序添加到设备的本机日历应用程序。 通常，这类功能在旅馆租赁和机票预订应用程序中使用，仅举几个潜在的用例。
To explore more, I’d suggest you take a look at the following resource:
要探索更多内容，建议您看一下以下资源：
👉 To learn more about React Native, check out these resources:
👉要了解有关React Native的更多信息，请查看以下资源：
My personal newsletter where you get updates on the latest posts
我的个人通讯 ，您可以从中获取最新信息
More posts on React Native at my blog
Editor’s Note: Heartbeat is a contributor-driven online publication and community dedicated to exploring the emerging intersection of mobile app development and machine learning. We’re committed to supporting and inspiring developers and engineers from all walks of life.
编者注： 心跳 是由贡献者驱动的在线出版物和社区，致力于探索移动应用程序开发和机器学习的新兴交集。 我们致力于为各行各业的开发人员和工程师提供支持和启发。
Editorially independent, Heartbeat is sponsored and published by Fritz AI, the machine learning platform that helps developers teach devices to see, hear, sense, and think. We pay our contributors, and we don’t sell ads.
Heartbeat在编辑上是独立的，由以下机构赞助和发布 Fritz AI ，一种机器学习平台，可帮助开发人员教设备看，听，感知和思考。 我们向贡献者付款，并且不出售广告。
If you’d like to contribute, head on over to our call for contributors. You can also sign up to receive our weekly newsletters (Deep Learning Weekly and the Fritz AI Newsletter), join us on Slack, and follow Fritz AI on Twitter for all the latest in mobile machine learning.
如果您想做出贡献，请继续我们的 呼吁捐助者 。 您还可以注册以接收我们的每周新闻通讯(《 深度学习每周》 和《 Fritz AI新闻通讯》 )，并加入我们 Slack ，然后关注Fritz AI Twitter 提供了有关移动机器学习的所有最新信息。
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
