1

我尝试在我的项目中使用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>
        );

这是我的错误，当我向下滚动时，仍然没有任何显示。 在此处输入图像描述

请给我一些解决方案，非常感谢大家

4

1 回答 1

1

NavigationBar从不shoutem/ui知道如何使用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>
     );
     
     }
}

或者，如果您的 screen 位于shoutem 扩展程序中，或者您在项目中使用CardStackfrom @shoutem/ui/navigation，您可以删除并将fromScrollView.DriverProvider的导入更改为NavigationBar@shoutem/ui@shoutem/ui/navigation

于 2017-09-12T08:30:41.743 回答