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