Tag: React

创建软件生态圈：MyBooks教程：概述: 您好，欢迎访问MyBooks软件生态圈教程！本教程将引导您使用“家庭图书馆目录”作为示例来创建软件生态圈。我已经使用（或误用了）术语“软件生态圈”作为我们将用来创建应用程序的所有软件的包含概念。我还没有找到一个更好的术语，虽然生态圈对不同的人意味着不同的事情，但是比尝试提出自己的术语要容易得多。为什么要建家庭图书馆？它很简单，当我进入书店I时，我需要一种方法来跟踪我图书馆中已有的东西。是的，已经有可以执行此操作的应用程序，但是我也想同时创建一个软件生态系统教程。这是一个非常简单的问题，该领域应该是可以普遍理解的。我将其命名为“我的家庭图书馆目录MyBooks”，因为目前似乎没有使用🙂。至于功能，这是我们将要完成的工作：将信息存储在云中。（是的，我可以在专用服务器上执行此操作，但这不是那么有趣，不是吗？）具有Web应用程序界面（是的，iOS应用程序就足够了，但是请参阅第一个项目符号）功能应包括图书的CRUD操作（CRUD ==创建，读取，更新，删除）地点的CRUD操作（我有两套公寓，但我不确定哪本书在哪里）能够借出书籍。对书进行评分的能力。能够对一本书做笔记。允许同一本书的多个副本。能够搜索/过滤书籍：按作者按标题按评分按贷款状态按位置能够链接或标记同一本书的多个版本。（对于不同的印刷品，ISBN通常是相同的，但是不同的版本具有不同的ISBN）有一个iOS应用程序。除了Web应用程序界面之外，iOS应用程序的功能还应包括：扫描ISBN条形码。该软件生态圈将由以下内容组成：云中的简单数据库基于云的Web服务，允许应用程序与数据交互面向最终用户的基于云的Web应用程序适用于我们最终用户的本地iOS应用程序尽管我有一个计划，但[解决方案]总是有无数的路径，因此某些计划在技术上的路径可能会或可能不会被使用： Google Cloud Platform MySQL的红宝石反应迅速红宝石矿 MySQL工作台吉特 Node.js npm 我不会深入研究每种技术，而只是建立一种建立软件生态圈的可行方法，并展示如何将各个部分组合在一起以提供完整的解决方案。在开始之前，这里有一些我将要用做的决定的基础：安全至上。尽可能使用现有的库和技术。使它尽可能简单，但不要简单。为小规模发展，但为大规模计划。 […]

让我们用React Navigation导航: 我们都知道，实施导航很重要，有时会给移动应用程序的开发带来痛苦。因为它直接或剧烈地影响着用户体验和应用程序性能的好坏。您需要从多个有趣的导航解决方案中进行选择，并以明智的方式使用它来获得所需的结果。在React Native世界中，大多数事情仍然充满活力和不成熟。 React社区非常强大且富有成效。但是，这给所有积极的事情带来了痛苦。例如，在几次版本更新后，可能会弃用您喜欢的库或所选功能。以我自己的经验，我开始使用react native的导航器api，然后决定切换到Navigation Experiment以在性能和前向兼容性方面获得更好的结果，它看起来很有希望，当时的嗡嗡声是非常积极的，但是最近突然不推荐使用。所有这些事情几乎都发生在一年之内。首先，什么是React Navigation？在React Native官方文档中，它被描述为： React Navigation提供了一种易于使用的导航解决方案，能够在iOS和Android上呈现常见的堆栈导航和选项卡式导航模式。由于这是JavaScript实现，因此与状态管理库（例如redux）集成时，它提供了最大的可配置性和灵活性。是的，它与IOS和Android都兼容，非常灵活，您可以将其与redux，flux或mobx集成。在开始之前，让我们检查示例导航应用程序的最终版本。为了简化和提高生产力，我们将在Expo的帮助下对该示例应用进行编码（我不会进入主题，您可以从链接中进行检查），因此您也可以在Expo Client中查看工作示例。好吧，让我们现在滚动。如果您想签出并玩代码；这是 github repo链接和expo链接用于示例应用程序。开始吧！用expo创建一个新的空白项目，不要让expo为导航布局一些代码，而是选择空白项目。现在，我们可以将反应导航添加到我们的项目中。 npm install –save react-navigation 或者如果您安装了纱线； yarn add react-navigation 与三种类型的导航器捆绑在一起的React导航； StackNavigator，TabNavigator和DrawerNavigator。我不想为您提供有关导航器类型的更多详细信息，您可以从文档中进行检查。我们将在我们的应用程序中使用这三个。现在，让我们创建一个文件，并像这样在其中添加StackNavigator 。导入{ StackNavigator， DrawerNavigator， TabNavigator} 来自“反应导航”；从’./FirstScreen’导入FirstScreen；从“ ./SecondScreen”导入SecondScreen；从’react’导入React； […]

在React Native中构建动画挂钩: 注意：在记录/写入时，React Native 0.59处于RC状态。因此，要试用它，您需要指定您的React Native版本react-native init MyProject –version react-native@next 第二注：钩子是新的，我也是新手。我可能在视频中多次认错-抱歉！我也在学习他们😉 这篇文章最初发表在React Native School上。有关最新文章和资源，请在那里访问我！另外，如果您希望升级为React Native开发人员，请查看我们的其他一些教程！为什么要使用Ref？我在此代码中使用useRef的原因是由于文档中的这一行：返回的对象将在组件的整个生存期内持续存在。因为我们想要一个不断更新的动画值，所以我们希望它在组件的整个生命周期中保持不变，而不是在每次组件更新时重新创建（在这种情况下，每次计数都会递增）。更新＃1：避免内存泄漏请查看下面的代码。为避免内存泄漏，您需要清理卸载组件时的超时。您可以通过从useEffect回调返回一个函数（在其中调用clearTimeout来实现此目的。感谢Milli指出这一点！其他资源了解有关React Hooks的更多信息。 useEffect挂钩 useRef挂钩视频的最终代码可以在下面找到： import React, { useEffect, useRef } from ‘react’; import { View, Animated, Text } from ‘react-native’; const Box = ({ backgroundColor = […]

在React Native中加载自定义字体的最简单方法: 字体书预览通常，它是没有扩展名的文件名。如果不是这样，请使用查找程序command + i查看字体全名，或者查看“字体书”以检查字体系列名称。无法识别的字体族“ YOUR_DEFINED_FONTS_FAMILY” 如果此消息显示为红色，则可能是字体家族名称错误。检查您的字体系列名称。并确保在链接自定义字体之后构建了应用程序。我想再次添加字体！您只需从№2开始执行。好的字体确实会给应用程序留下深刻的印象。如果您想创建出色的应用程序，则选择字体很重要。在网络中，我们可以以相同的方式使用Web字体系统，但是它包含性能问题。因此，在移动应用程序中，与Web应用程序相比，这是表达的优势。让我们开始使用自定义字体创建有吸引力的应用程序。下次，我将向您介绍如何在React Native应用程序中有效地管理字体。干杯! 🍺

让我们动起来：React Native动画简介-第3部分: 如果您想完全从头开始，这里是第1部分的链接，在第1部分中，我们使用LayoutAnimation动画了单个元素在屏幕上的重新放置。在第2部分中，我们讨论了Animated API，内插值和循环动画。我们把东西包起来怎么样？我们将在本系列文章中介绍的最后一件事是根据用户的手势输入为屏幕上的元素设置动画。您可能不会立即将其视为“动画”，但是该元素不仅会自动移动。为此，我们将使用React Native所谓的PanResponder 。我们将使用其中之一来允许我们在屏幕上拖动Jake。首先，让我们创建一个新的Animated.Value来保存Jake的位置并使用用户的手势对其进行更新。因为我们要沿着X和Y轴移动Jake，所以我们将在构造函数中创建一个Animated.ValueXY ，而不仅仅是Animated.Value 。我们不需要传递任何默认值，因为我们不需要像上一篇文章中对旋转值所做的那样对起始值进行任何假设或对其进行插值。 this._gestureValue = new Animated.ValueXY(); 接下来，我们需要创建PanResponder的实例。我们import PanResponder from ‘react-native’ ，并在新的_gestureValue下创建它。它需要许多配置选项。这直接来自React Native文档： this._panResponder = PanResponder.create（{ //要求成为响应者： onStartShouldSetPanResponder：（evt，gestureState）=> true， onStartShouldSetPanResponderCapture：（evt，poseState）=> true， onMoveShouldSetPanResponder：（evt，gestureState）=> true， onMoveShouldSetPanResponderCapture：（evt，poseState）=> true， onPanResponderGrant：（evt，手势状态）=> { //手势已开始。显示视觉反馈，以便用户知道 // 怎么了！ //现在将gestureState.d {x，y}设置为零 }， onPanResponderMove：（evt，手势状态）=> { //最近的移动距离是gestureState.move {X，Y} //成为响应者以来的累计手势距离为 //gestureState.d{x,y} […]