Question

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

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

我想做的是使组件本身在屏幕之间移动时为其显示动画标题？通常，如何使用自定义标头完成此操作？我已经看过Header的react-navigation-stacks实现，但是我不太理解。

Answer 1

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

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

如果您使用的是react-navigation-stack@2.x（字母），则会获得一个名为scene的道具。这是一个包含progress属性的对象，该属性具有3个属性，它们是reanimated节点。

current：表示标题的屏幕进度，范围为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上设置标题动画。这可能有些棘手，所以您必须尝试一下。

例如，假设您要对不透明度进行动画处理，以在屏幕出现时从0.5开始到1：

注意：我还没有测试过，所以代码可能是错误的。因此，您必须尝试一下。

import { Animated } from "react-native";

// ...

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

自定义页眉组件中的屏幕过渡上的标题动画？

1 个答案: