实现Hero动画，如shoutem 关于扩展

Posted 2023-02-23

【中文标题】实现Hero动画，如shoutem 关于扩展

【英文标题】：Implement Hero animation like shoutem About extension

【发布时间】：2017-05-18 08:09:19

【问题描述】：

我尝试实现英雄动画，就像在喊叫 About 扩展中一样。基本上，我将 animationName 添加到 NavigationBar 和扩展中的 Image 中。我还必须添加 ScrollDriver，否则它会出错。但似乎 NavigationBar 没有将驱动程序传递给它的子组件，所以我仍然收到此错误。是否可以像这里演示的那样实现英雄动画？ https://medium.com/shoutem/declare-peace-with-react-native-animations-e947332fa9b1

谢谢，

import  ScrollDriver  from '@shoutem/animation';


getNavBarProps() 
  const driver = new ScrollDriver();
  return 
    hasHistory: true,
    driver: driver,
    title: 'Title',
    navigateBack: () => this.props.navigation.dispatch(NavigationActions.back()),
    styleName: 'fade clear',
    animationName: 'solidify',
  ;


render () 
  const driver = new ScrollDriver();
  return (
  <Screen styleName=" paper">
    <View style=height:68>
      <NavigationBar ...this.getNavBarProps() />
    </View>

    <ScrollView style=styles.container>
      <Image
        styleName="large"
        source=require('../Images/spa2.jpg') 
        defaultSource=require('../Images/image-fallback.png')
        driver=driver
        animationName="hero"
      />
...

【参考方案1】：

我是这篇文章的作者，从你的问题来看，我不确定你是想在shoutem 上创建一个扩展，还是你只是想在任何其他React Native 应用程序中重新创建动画。

如果您从 @shoutem/ui/navigation 创建扩展或 CardStack，则无需关心 ScrollDriver。它将通过上下文推送到 ScrollView（从 @shoutem/ui 导入）和 NavigationBar（从 @shoutem/ui/navigation 导入）。

如果您正在创建自己的 React Native 项目以便能够像文章中那样做，我建议如下。在应用的根组件中：

import ScrollView from '@shoutem/ui';

class App extends Component 
  ...
  render() 
    return (
      <ScrollView.DriverProvider>
        <App />
      </ScrollView.DriverProvider>
    );
  

然后您不必在每个屏幕上都初始化 ScrollDriver，如果您使用我们的组件和 ScrollView，它会将驱动程序推送到需要的位置。 :) 所以你的屏幕最后会是这样的：

import 
  ScrollView,
  NavigationBar,
  Image
 from '@shoutem/ui';

class MyScreen extends Class 
  render() 
    return (
      <Screen>
        <NavigationBar animationName="solidify" />
        <ScrollView>
          <Image animationName="hero" />
        </ScrollView>
      </Screen>
    );
  

整个工作示例在这里https://github.com/shoutem/ui/tree/develop/examples/RestaurantsApp/app

【讨论】：

谢谢，我尝试在自己的应用中重新创建动画。我像你说的那样添加了 ScrollView.DriverProvider 但我得到了错误： undefined is not an object (evalating '_ui2.default.DriverProvider') imgur.com/a/iiDcQ

我也有同样的问题。如果您找到任何解决方案，请告诉我？