React Native - Undefined не является объектом (оценивается как singleValue.stopTracking) - PullRequest
Новая
       22

React Native - Undefined не является объектом (оценивается как singleValue.stopTracking)

0 голосов
/ 13 мая 2018

Я пытаюсь воспроизвести анимацию индивидуально item.id в flatlist. Пока я могу связать идентификатор и предупредить правильный, когда я нажимаю анимацию. К сожалению анимация не воспроизводится и я получаю эту ошибку Undefined is not an object (evaluating 'singleValue.stopTracking'). 

    anim_star = (id) => {
  Alert.alert(id);
  this.setState({ progress: new Animated.Value(id) });
  Animated.timing(this.state.progress[id], {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();
 }

Собирает идентификатор и должен воспроизводить анимацию, для которой когда-либо был выбран идентификатор. 

   data={ this.state.dataSource}

   ItemSeparatorComponent = {this.FlatListItemSeparator}


   renderItem={({item}) => <View>


   <Card>


     <View rkCardFooter>
     <TouchableOpacity
     onPress={this.anim_star.bind(this, item.id)}
      style={{position:'absolute',  height: '100%', width: '100%',}}>
      <Animation
      progress={this.state.progress[item.id]}
      source={require('../Animations/favourite_app_icon.json')}
      style={{ height: '100%', width: '100%', position: 'absolute'}}
      resizeMode="contain"
      />
      </TouchableOpacity>

       <Text> Sample</Text>

     </View>

   </Card>

Отображение анимации для любого количества категорий.

И, наконец, вот как выглядят мои реквизиты и состояния: 

    constructor(props)
{

  super(props);

  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: new Animated.Value(0),
};

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

1 Ответ

0 голосов
/ 13 мая 2018

Редактировать:

Я бы попробовал изменить anim_star следующим образом: 

anim_star = (id) => {
  Alert.alert(id);
  let progress = this.state.progress; <---
  progress[id] = new Animated.Value(0); <---
  this.setState({ progress }); <---
  Animated.timing(this.state.progress[id], {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();
 }

И в вашем конструкторе: 

constructor(props)
{
  super(props);

  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: {}, <---
};

Каждый компонент вашего плоского спискарендеринг должен иметь свое собственное состояние и логику анимации.Кроме того, вы должны использовать специальные теги в вашем методе рендеринга для компонентов, которые вы хотите анимировать, а также назначать конкретное свойство состояния, которое вы хотите анимировать, в качестве значения для объекта стиля для компонента.

Например, если вы хотите изменить прозрачность, ваш визуализированный компонент будет выглядеть примерно так: 

render() {
  return(
    <Animated.Image 
      style={{ height: '100%', width: '100%', position: 'absolute', opacity: this.state.progress}}
      source={require('../Animations/favourite_app_icon.json')}
      resizeMode={`contain`}
    />
  )
}

Ваше объявление состояния со значением Animated и ваш метод Animated.timing () lookштраф;их просто нужно переместить в дочерний компонент, который выводит ваш плоский список.

...