使用 React Native Elements 和 Expo 克隆 Tinder

fatimakanij204

在移动设备上制作像素完美的布局很困难。尽管 React Native 比原生应用更容易，但仍然需要大量工作才能使移动应用程序变得完美。 Backward Skip 10s Play Video Forward Skip 10s 在本教程中，我们将克隆最著名的约会应用程序 Tinder。然后我们将了解一个名为React Native Elements的 UI 框架，它使 React Native 应用程序的样式设计变得容易。 由于这只是一个布局教程，因此我们将使用 Expo，因为它使设置比普通的旧react-native-cli. 我们还将利用大量虚拟数据来制作我们的应用程序。 我们将总共制作四个屏幕 - Home、Top Picks、Profile和Messages。 想从头开始学习 React Native 吗？本文摘自我们的高级库。使用 SitePoint Premium 获取一整套 React Native 书籍，涵盖基础知识、项目、技巧和工具等。

立即加入，每月仅需 9 美元。 先决条件 Learn to Code with JavaScript 对于本教程，您需要具备React Native的基本知识并熟悉Expo。您还需要在移动设备上安装 Expo 客户端或在计算机上安装兼容的模拟器。可以在此处找到有关如何执行此操作的说明。 您还需要对 React Native 中的样式有 黎巴嫩电话号码表 基本的了解。React Native 中的样式基本上是类似于 CSS 的抽象，只有一些差异。您可以在样式备忘单中获取所有属性的列表。 在本教程的整个过程中，我们将使用yarn. 如果您尚未安装，请从此处yarn安装。 另请确保您已expo-cli在计算机上安装。 如果尚未安装，请继续安装： $ yarn global add expo-cli 为了确保我们在同一页面上，本教程中使用了以下版本： 节点11.14.0 npm 6.4.1 纱线1.15.2 世博会2.16.1 expo-cli如果您有一段时间没有更新，请确保更新，因为expo版本很快就会过时。



我们将构建如下所示的东西： Learn to Code with JavaScript 世博会上的 Tinder 演示 如果您只想克隆存储库，可以在GitHub上找到完整代码。 入门 让我们使用以下命令建立一个新的 Expo 项目expo-cli： $ expo init expo-tinder 然后它会要求您选择一个模板。你应该选择tabs并点击Enter。 Expo Init - 选择模板 然后它会要求您命名该项目。键入expo-tinder并Enter再次点击。 Expo Init - 为项目命名 最后，它会要求您按y安装依赖项yarn或n安装依赖项npm。按y。 Learn to Code with JavaScript Expo Init - 安装依赖项 这将使用expo-cli. 反应原生元素 React Native Elements 是一个针对 React Native 的跨平台 UI 工具包，在 Android、iOS 和 Web 上具有一致的设计。 它易于使用并且完全使用 JavaScript 构建。它也是第一个为 React Native 制作的 UI 套件。