问实现类似shoutem的关于扩展的Hero动画
EN

Stack Overflow用户

提问于 2017-05-18 16:09:19

回答 1查看 282关注 0票数 1

我尝试实现英雄动画，就像在关于扩展的shoutem中一样。基本上，我将图像添加到NavigationBar中，就像在扩展中一样。我还必须添加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"
      />
...

shoutem

回答 1

Stack Overflow用户

发布于 2017-05-18 16:52:14

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

如果你从@shoutem/ui/ CardStack创建一个扩展或者导航，你不需要关心ScrollDriver。它将通过上下文被推送到导航(从@shoutem/ui导入)和导航(从@ ScrollView /ui/ NavigationBar导入)。

如果您正在创建自己的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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44042062

复制

相似问题

问实现类似shoutem的关于扩展的Hero动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现类似shoutem的关于扩展的Hero动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现类似shoutem的关于扩展的Hero动画
EN