react-navigation header Expo 的折叠动画

Question

我正在调查 react-navigation 中的 header 是否可以像 Twitter 等最广泛使用的社交应用程序一样制作动画

最近为了这个目的，遇到了coinbase's example which is given here.

我的问题是：

一般来说，react-navigation header 是如何做动画的？
具体来说，如何将 Coinbase 示例与 react-navigation 相结合？

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

因此，欢迎任何原子示例代码。

Answer 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 文档中上面的代码片段应该可以提供线索。

Answer 2

I made a gif of the repo you linked to, and the associated snack.

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

该视频展示了更复杂的转换，但与您的 Coinbase 示例中的转换方式类似：

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

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

现在，基于此，您可以尝试为自定义组件制作动画，传入屏幕的 navigationOptions，这将对其 child 组件应用过渡（不透明度或其他），基于在通过 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 示例中的操作方式）。

如果动画不依赖于滚动位置值——我的意思是它只会在某个阈值时来回触发，而不是直接跟随用户手指——你不会经常发送，它应该太懒惰了。如果是这样，那么您应该依赖 non-blocking 动画代码（有关示例，请参见链接的视频），和/或切换自定义视图以获得完全控制。

react-navigation header Expo 的折叠动画

react-navigation header collapse animation with Expo

react-native

react-navigation

expo

react-navigation-collapsible