ScrollView.Provider shoutem/animation内にNavigationBarが表示されない

Question

私のプロジェクトでshoutemを使用しようとすると、@ shoutem/animationを使ってみると、スクロールリストのように何かすると画面がよく見えるようになります。ここの下に私のコードを見てください：ここ

は私のインポートです：私は、スクロールダウンしたときに

import React, { Component } from 'react'; 
 
import { Screen, Text, Image, Tile, Title, Subtitle, NavigationBar, View, ScrollView } from '@shoutem/ui'; 
 
import { ScrollDriver, } from '@shoutem/animation';

return (
 
      <ScrollView.DriverProvider> 
 
       <Screen> 
 
        <NavigationBar 
 
         styleName='clear' 
 
         animationName="solidify" 
 
         title={restaurant.name} 
 
         share={{ 
 
          title: restaurant.name, 
 
          link: restaurant.url, 
 
         }} 
 
        /> 
 
        <ScrollView> 
 
         <Image 
 
          styleName="large-portrait placeholder" 
 
          source={{ uri: restaurant.image.url }} 
 
          animationName="hero" 
 
         > 
 
          <Tile animationName="hero"> 
 
           <Title>{restaurant.name}</Title> 
 
           <Subtitle>{restaurant.address}</Subtitle> 
 
          </Tile> 
 
         </Image> 
 
         <View 
 
          styleName="solid" 
 
          style={{ 
 
           backgroundColor: 'white', 
 
           height: 700, 
 
           padding: 15, 
 
          }} 
 
         > 
 
          <Text> 
 
           Gaspar is a delightful French restaurant in 
 
      San Francisco\’s Financial District that is inspired by the romantic, 
 
      bustling Paris of old. Located near famed Union Square, our richly-designed 
 
      interiors make you feel as if you are truly in Paris and provide the perfect 
 
      setting for enjoying our exquisite classic and modern French fare such as Duck 
 
      Leg Confit and always popular Steak Frites. Gaspar offers two stories of dining 
 
      in addition to full bars both upstairs and downstairs and an exclusive room 
 
      reserved to hold the largest selection of Cognac in San Francisco. 
 
      In addition to our all day menu, we offer live jazz music on Saturdays. 
 
      </Text> 
 
         </View> 
 
        </ScrollView> 
 
       </Screen> 
 

 
      </ScrollView.DriverProvider> 
 
     );

そしてここでは、私の誤りで、まだ何も見せなかった。 shoutem/uiから輸入

私にそれを解決するためのいくつかのソリューションを提案してください、おかげでそんなにみんな

Answer 1

NavigationBar希望のアニメーションを達成するためにそうScrollView.DriverProvider

で動作するように知らない、私は何かをするだろうこのような：

MyScreen extends React.Component { 
 
    constructor() { 
 
    this.scrollDriver = new ScrollDriver(); 
 
    } 
 
    render() { 
 
    return (
 
     <Screen> 
 
      <NavigationBar 
 
       styleName='clear' 
 
       animationName="solidify" 
 
       title={restaurant.name} 
 
       share={{ 
 
        title: restaurant.name, 
 
        link: restaurant.url, 
 
       }} 
 
       driver={this.scrollDriver} 
 
      /> 
 
      <ScrollView driver={this.scrollDriver}> 
 
       <Image 
 
        styleName="large-portrait placeholder" 
 
        source={{ uri: restaurant.image.url }} 
 
        animationName="hero" 
 
       > 
 
        <Tile animationName="hero"> 
 
         <Title>{restaurant.name}</Title> 
 
         <Subtitle>{restaurant.address}</Subtitle> 
 
        </Tile> 
 
       </Image> 
 
       <View 
 
        styleName="solid" 
 
        style={{ 
 
         backgroundColor: 'white', 
 
         height: 700, 
 
         padding: 15, 
 
        }} 
 
       > 
 
        <Text> 
 
         Gaspar is a delightful French restaurant in 
 
        San Francisco\’s Financial District that is inspired by the romantic, 
 
        bustling Paris of old. Located near famed Union Square, our richly-designed 
 
        interiors make you feel as if you are truly in Paris and provide the perfect 
 
        setting for enjoying our exquisite classic and modern French fare such as Duck 
 
        Leg Confit and always popular Steak Frites. Gaspar offers two stories of dining 
 
        in addition to full bars both upstairs and downstairs and an exclusive room 
 
        reserved to hold the largest selection of Cognac in San Francisco. 
 
        In addition to our all day menu, we offer live jazz music on Saturdays. 
 
        </Text> 
 
       </View> 
 
      </ScrollView> 
 
     </Screen> 
 
    ); 
 
     
 
    } 
 
}

それとも、画面場合shoutem拡張内にあるか、あなたはあなただけScrollView.DriverProviderを削除し、@shoutem/ui/navigation