Реализовать анимацию героя, например, крикет. О расширении

Я пытаюсь реализовать анимацию героя, как в расширении «О программе». По сути, я добавляю 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"
      />
...

shoutem
person Anh Pham    schedule 18.05.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я автор статьи, из вашего вопроса я не уверен, что вы пытаетесь создать расширение для Shoutem или просто хотите воссоздать анимацию в любом другом приложении React Native.

Если вы создаете расширение или CardStack из @shoutem/ui/navigation, вам не нужно заботиться о 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

person Ivan Vukovic    schedule 18.05.2017
comment
Спасибо, я пытаюсь воссоздать анимацию в своем приложении. Я добавляю ScrollView.DriverProvider, как вы сказали, но получаю сообщение об ошибке: undefined не является объектом (оценка '_ui2.default.DriverProvider') imgur.com/a/iiDcQ - person Anh Pham; 19.05.2017
comment
У меня такая же проблема. Не могли бы вы сообщить мне, нашли ли вы какое-либо решение для этого? - person Shanaka; 16.10.2017