1

我尝试像在shoutem 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"
      />
...
4

1 回答 1

2

我是这篇文章的作者，从你的问题来看，我不确定你是想在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

于 2017-05-18T08:52:14.040 回答