自定义 Header 组件中屏幕转换的标题动画？

Question

我有自己的 Header 组件，它有一个搜索字段和我的应用程序独有的其他一些功能。我只是在每个屏幕的 navigationOptions 上定义它。

SomeScreen.navigationOptions = (props) => ({
  header: <Header {... props} />,
});

不过，我想做的是在组件从一个屏幕移动到另一个屏幕时为组件本身内的标题添加动画效果？一般来说，我如何使用自定义 header 来完成此操作？我查看了 Header 的 react-navigation-stacks 实现，但我无法理解它。

Answer 1

根据您的堆栈导航器版本，您需要检查收到的道具。首先，将一个返回元素的函数传递给 header 选项，以便您接收道具：

SomeScreen.navigationOptions = {
  header: props => <Header {...props} />
};

如果您在 react-navigation-stack@2.x（测试版），您会得到一个名为 scene 的道具。这是一个包含 progress 属性的 object，它具有 3 个属性，即 reanimated 个节点。

current：表示header画面的进度，取值范围为0到1，其中0表示画面完全隐藏，1表示画面完全显示。
next：与当前类似，但用于堆栈中的下一个屏幕。可以 undefined 当没有下一个屏幕时
previous：与当前类似，但针对堆栈中的上一个屏幕。可以 undefined 当没有上一个屏幕时

您可以对这些值进行插值以使您的视图具有动画效果。例如，假设您想要设置不透明度的动画，使其在屏幕进入时从 0.5 开始变为 1：

import Animated from "react-native-reanimated";

// ...

<Animated.Text
  style={{
    opacity: Animated.interpolate(scene.progress.current, {
      inputRange: [0, 1],
      outputRange: [0.5, 1]
    })
  }}
/>;

如果您在 react-navigation-stack@1.x，您会得到一个名为 position 的道具。它是一个动画节点，表示堆栈的当前位置（范围从 0 到当前索引）。您可以在其上 interpolate 来激活您的 header。这可能有点棘手，所以你必须尝试一下。

例如，假设您想设置不透明度的动画，使其在屏幕进入时从 0.5 开始变为 1：

NOTE: I haven't tested this one so the code might be wrong. So you'll have to play around with it.

import { Animated } from "react-native";

// ...

<Animated.Text
  style={{
    opacity: position.interpolate({
      inputRange: [index - 1, index],
      outputRange: [0.5, 1]
    })
  }}
/>;

自定义 Header 组件中屏幕转换的标题动画？

Title animations on screen transition in custom Header component?

react-native

react-navigation

react-navigation-stack