shoutemのようなヒーローアニメーションを実装する拡張機能について

Question

拡張機能についてshoutemのようなヒーローアニメーションを実装しようとしています。基本的には、animationNameを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" 
     /> 
... 

Answer 1

私はあなたが質問から、私はあなたがshoutemの拡張機能を作成しようとしているかわからないか、あなただけの希望、記事の著者です他のReact Nativeアプリでアニメーションを再現することができます。

@ shoutem/ui/navigationから拡張機能やCardStackを作成している場合、ScrollDriverを気にする必要はありません。 @shoutem/uiからインポートされた）ScrollViewと（@ shoutem/ui/navigationからインポートされた）NavigationBarにコンテキストを渡します。

記事で好きなように独自のReact Nativeプロジェクトを作成している場合は、次のことをお勧めします。

import ScrollView from '@shoutem/ui'; 

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

次にあなたが私たちのコンポーネントとScrollViewを使用している場合、それはそれはする必要がありますドライバをプッシュしますが、各画面でScrollDriverの初期化の世話をする必要はありません：あなたのアプリのルートコンポーネントで。 :)だから、最後に、あなたの画面は次のようになります。

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