Tag: Animated Api

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函数），以及基于空间和字体大小的不同标题的一些长度限制。 […]