使用 Expo 的 react-navigation 标题折叠动画答案

【问题标题】：react-navigation header collapse animation with Expo使用 Expo 的 react-navigation 标题折叠动画
【发布时间】：2021-06-04 09:38:59
【问题描述】：

我正在调查react-navigation 中的标题是否可以像 Twitter 等最广泛使用的社交应用程序一样进行动画处理。

最近为此遇到了coinbase's example which is given here。

我的问题是：

一般来说，如何为 react-navigation 标头设置动画？
具体来说，如何将 Coinbase 示例与 react-navigation 结合起来？

同样，我也找不到任何干净的使用 react-navigation-collapsible 的 react-navigation 示例。

因此，任何原子示例代码都会受到赞赏。

【问题讨论】：

您正在寻找的行为的明确示例会很棒。但我不认为这是可能的。如果我没记错的话，我认为动画化的能力是 react-native-navigation 的主要卖点之一。
你能附上coinbase可折叠标题的视频示例吗？
我是否正确理解了您的问题？任何反馈将不胜感激。
嗨@Bigood。是的，你和托马斯做对了。但问题是我已经处于你所做的状态（如小吃）或托马斯所做的。相反，我需要一个将 Coinbase 的代码和 react-navigation 混合在一起的 repo。作为第一个回答我标记了其他答案。但我准备重新设置新的赏金以获得确切的答案。我希望这可以澄清。
哦，你是对的，第一个答案总是最好的。下一次，我也只是引用文档而不是挖掘问题。祝你好运！

标签： react-native expo react-navigation react-navigation-collapsible

【解决方案1】：

https://reactnavigation.org/docs/stack-navigator/

const progress = Animated.add(scene.progress.current, scene.progress.next || 0);

const opacity = progress.interpolate({
  inputRange: [0, 1, 2],
  outputRange: [0, 1, 0],
});

return (
  <Animated.View style={{ opacity }}>{/* Header content */}</Animated.View>
);

来自react-navigation 上面的代码 sn-p 文档应该提供线索。

【讨论】：

【解决方案2】：

I made a gif of the repo you linked to 和 the associated snack。

不久前我也有类似的需求，偶然发现了这个：https://www.youtube.com/watch?v=xutPT1oZL2M

此视频展示了更复杂的过渡，但与您在 Coinbase 示例中的方式类似：

使用您自己的Views 创建此效果
使用（或不使用）动画库根据 Scrollview 的当前滚动位置插入元素的不透明度和定位

我当时在 ReactNavigation 上找到的所有文档都是关于在导航发生时转换视图/标题的。我了解您不想仅仅为了制作动画而避免在特定屏幕上使用 ReactNavigation。

现在，基于此，您可能会尝试为自定义组件设置动画，在屏幕的navigationOptions 中传递，该组件将根据ReactNavigation 传递的道具对其子组件应用过渡（不透明度或其他）状态机制和its dispatch method。

没有测试过的伪代码，展示一下思路：

class ScreenWithAnimatedNavBar extends Component {

  static navigationOptions = ({navigation}) => ({
    headerTitle: <CustomNavbar shouldDisplayTitle={navigation.state.params.shouldDisplayTitle} title="Your title" />,
  })
  ...
  render() {
     <ScrollView onScroll={this.handleScroll}>
       ...
  }
  
  handleScroll (event) => {
    //Decide whether you should trigger the animation, based on event.nativeEvent.contentOffset.y and your threshold
    //Dispatch the animation in ReactNavigation's state if needed
    // https://reactnavigation.org/docs/navigation-actions/#setparams
    navigation.dispatch(CommonActions.setParams({ shouldDisplayTitle: true | false }));

  }

CustomNavbar 触发基于 shouldDisplayTitle 道具的动画（未说明，因为不相关 - 请参阅视频或 Coinbase 示例中的操作方式）。

如果动画不依赖于滚动位置值——我的意思是它只会在某个阈值处来回触发，而不是直接跟随用户手指——你不会经常调度，也不应该迟钝。如果是这样，那么您应该依靠非阻塞代码来制作动画（例如，请参阅链接视频），和/或切换自定义视图以获得完全控制。

【讨论】：