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

如前所述，所有代码都可以在GitHub（https://github.com/alexkuttig/react-native-view-with-title）和npm（npm我react-native-view-with-title）上获得。

可以基于此实现很多事情（按钮，SearchField，PullToRefresh……）。找到空闲时间后，我会继续进行下去…

同时，我感谢您的讨论和反馈！