Tag: React Native开发
UI指南特定标题（包括iOS大标题），带有react-native（动画）
在iOS 11发行版中，Apple引入了大标题，并将规范添加到了设计准则（https://developer.apple.com/ios/human-interface-guidelines/bars/navigation-bars/）中。 在第一次大喊大叫之后，这些标题已被广泛接受，并在iOS上越来越多的应用程序中使用。 现在该看看如何以本机方式实现它们。 我们将创建一个“ ViewWithTitle”组件，它将作为您可以放置标题和子组件的容器。 然后，ViewWithTitle用iOS上的大标题和Android上的标准标题呈现页面。 当用户滚动时，它还会为标题添加动画效果。 由于我确实讨厌没有详细示例的博客文章，因此您可以在Github（https://github.com/alexkuttig/react-native-view-with-title）上查看此文章的代码，也可以通过npm（npm）获取组件。我反应本机视图与标题）。 返回执行。 关于标题，有两个棘手的部分。 我们希望它们在任何设备上都具有正确的尺寸，并在两个平台上均符合规范。 当用户在iOS上向下滚动时，大标题应设置动画并更改为标准标题。 第一部分并不难。 主要是关于阅读UI指南并编写不同的案例……为此我写了一个小帮手： 它返回给我iPhoneX的StatusBar，Header和底部填充值的高度，以及我的SafeArea的vh和vw值。 使用此值，我可以在ViewWithTitle组件中工作。 接下来，我们需要定义组件的结构。 我们需要一个用于标题的区域，以及一个用于内容的容器。 您可以看到我们有一个外部容器，其中所有内容将包含所有内容；一个标题容器，其中将放置标题；一个内部容器，其中将放置我们的内容。 我们正在使用DimensionsHelper来获取容器的高度。 缺少的渲染功能将在下一步中创建。 renderTitle 0.1： 首先，我们必须再次进行一些基于样式表的工作。 根据不同的UI准则，我们为iOS和Android标题编写样式。 没有动画，没有iOS大标题。 我们确实首先需要另一件事： renderContentArea： 结构非常简单。 我们使用ScrollView并将全角视图放入ScrollView内，然后在其中放置内容。 但是为了给我们的标题添加动画效果，我们需要知道ScrollView何时滚动。 因此，我们添加了onScroll函数并将滚动值绑定到我们的state.scrollY。 这很重要，因为在下一步中，我们将使用此值为标题添加动画效果！ renderTitle 1.0： 由于我们只想在iOS上显示标准标题，因此当用户滚动视图时，我们必须通过Animated API做一些动画魔术。 目前，我们仅查看renderTitle函数的iOS部分 ，因为这里不需要Android上的任何动画。 我们使用state.scrollY，其中包含ScrollView的滚动值，并对其进行插值以获得不透明度和边框颜色。 需要更改边框颜色，因为标题始终停留在我们接下来将要创建的大标题的顶部（zIndex）。 请注意，我们使用外推：’clamp’防止内插函数外推值。 renderIOSBigTitle： 到目前为止，我们只有一个iOS标题，该标题一直隐藏到用户滚动为止。 现在，我们将通过添加具有绝对位置的容器来更改此设置。 此容器位于标题容器的下方（yIndex）和内容容器的顶部（zIndex）。 我们还添加了两个插值。 一种用于字体大小，当用户“过度滚动”视图时，我们希望将其增大。 第二个插值用于将大标题的容器（yIndex）向上移动，以便在用户向下滚动时将其滑动到标准标题容器的（zIndex）以下。 我们还必须在这里添加一些样式。 最后，我们只需要在这里和那里添加一些填充（内容容器），以及： TADA！ 大功告成 这是完整的代码，包括使用可选FlatList用法（而不是ScrollView）的实现（只需为组件提供数据数组和renderItem函数），以及基于空间和字体大小的不同标题的一些长度限制。 […]
如何将现有的本机应用程序集成到React-Native SDK
为什么写这篇文章？ 本文为您的iOS应用程序与React-Native SDK集成提供了非常基础且足够详尽的步骤。 如果按照上述所有步骤进行操作，那么到本文结尾，您将准备好完全集成的React-Native-iOS应用程序。 假定观众 假定您是一名程序员，并且具有为iOS，Android和Web平台中的任何一种构建应用程序的经验。 我希望您将macOS升级到Mojave（版本10.14.1），以使将来的开发更加顺畅。 它着重于使本地应用程序在react-native SDK中运行所需的基本更改。 快速了解React-Native项目的背景 首先让我快速介绍一下为什么我们非常需要这种集成。 我们在nearbuy.com上试图找出哪种UI / UX设计和功能最适合通过Web，M-Web（PWA），iOS和Android等各种平台访问我们产品的客户。 因此，我们开始在Web应用程序和PWA的各个页面上进行实验，这是因为通过部署时间的灵活性和快速向所有可能的最终用户进行更新的实验变得容易。 我们认为通过PWA进行的流量可以充分代表完整的移动流量的行为，即m-web，iOS和android的结合，但事实证明这还不够好，而通过本机应用进行的实验会浪费大量时间和资源因为本地更新涉及许多耗时的步骤，所以它是组织的一部分。 然后我们想到了将现有的本机应用程序集成到React-Native SDK中的想法。 此设置可帮助我们在需要时通过任何数量的动态应用程序更新/实验来吸引最终用户。 缩略语使用 RN：React Native PWA：渐进式Web应用程序 移动网络：移动网络 cli：命令行界面 RN包装器/ RN SDK：RN的“ Hello World”应用 第1步：设置React-Native SDK包装器 这是此设置最简单的部分。 对于初学者，您必须 按照此处的说明安装节点。 通过运行终端命令sudo npm install -g react-native-cli安装RN sudo npm install -g react-native-cli 。 您可以安装一个名为Watchman的软件包来监视文件系统中的更改，尽管这不是首要任务。 现在要创建RN包装器，请首先转到要保留RN项目代码的文件夹，然后在terminal中运行react-native init 命令。 此安装将花费一些时间，因为它涉及到安装诸如react＆react-native之类的库以及所有必需的依赖项。 RN包装器已准备就绪，可以进行进一步的集成，其结构应与下图中的结构完全相同，除了项目的名称。 步骤2：安装cocoapods并进行设置 这可以帮助您安装Xcode。 要在Xcode中运行iOS项目，您需要cocoapods。 […]
