2016-04-25 2 views
1

Я работаю над компонентом «toast» для моего адаптивного приложения. И он отлично работает с эмулятором iOS, но он не обновляет состояние перед анимацией на моем устройстве Android (Galaxy Note 2). Вот рендер моего компонента:React Native setState() & Анимированные на Android

render() { 
     return (<Animated.View 
         style={[{transform:[{translateY: this.animatedValue}]}, 
         styles.toast, 
         {backgroundColor: this.state.color}]}> 
        <Text style={styles.toastText}>{this.state.message}</Text> 
       </Animated.View>); 
    } 

this.animatedValue создается, как это на конструктор:

this.animatedValue = new Animated.Value(-70); 

И у меня есть способ показать, что обновляет состояние с this.setState, чтобы установить сообщение и цвет, перед началом анимации с Animated.timing У меня есть обратный вызов на конце анимации, который запускает тайм-аут, чтобы скрыть тост, так как я сказал, что все работает отлично на iOS, но на андроиде первый раз, когда отображается тост, он не имеет текста в он (я инициализировал message как пустую строку), и во второй раз он должен показать это, s отображает сообщение и цвет последнего тоста, которые он должен был показать. Ex. Ошибка входа в систему, и я вижу на консоли adb сообщение о неудачном входе в систему, но я вижу пустой с зеленым цветом, затем я делаю правильный логин, и я вижу на консоли adb сообщение об успешном входе в систему запускается, но я вижу неудавшееся сообщение с красным цветом: \.

Я полагаю, что это может быть изменение состояния, которое не полностью обновляется до начала анимации (Иногда я видел, как тост запускался с одним сообщением, а в середине/конце анимации он внезапно менял цвет и текст) , поэтому я сначала попытался запустить анимацию на обратном вызове setState, который предположительно вызывается после того, как состояние полностью изменено и отображено компонентом, но я все же вижу пустой тост сообщения, по иронии судьбы, перед запуском анимации, который я вижу на моем adb console, зарегистрированное новое состояние и корректно обновлено, но не отображается: \, я также попытался принудительно обновить сразу после setState с this.forceUpdate до запуска анимации шоу, но без успеха я все еще получаю пустое сообщение и все еще вижу Правильное состояние в моем журнале консоли: \, я даже попытался установить таймаут после setState и forceUpdate, чтобы дать время реагирующей среде для визуализации компонента или чего-то еще до анимации, но я все еще получаю пустое сообщение и правильное состояние, отображаемое в моем журнале консоли. D:

Я знаю, что это должно быть что-то очевидным или глупым, но я просто не могу понять :(, я работал с реагированием на родной язык, как 2 ~ 3 недели, я знаю javascript в течение длительного времени, и я думаю, что я мало понимаю, компоненты жизненного цикла, но не более того, я все еще новичок, чтобы реагировать на родной язык, поэтому любая помощь будет очень признательна, благодаря xD.

ответ

1

Итак, я понял, что происходит, по-видимому, если компонент полностью вне поля зрения, он не повторно отображает его (имеет смысл, не имеет ничего для визуализации) и запускает анимацию на последнем визуализированном компоненте (это то, что я считаю неправильным, оно должно повторно отобразить его, как только оно снова будет видно), поэтому я исправил его, сделав видимый компонент 1 пикселем (1 пиксельная строка) прозрачным фоном, поэтому он повторно отображается после состояние, когда будет показано и анимировано, и после того, как он скрывается, я снова установил его фон прозрачным, чтобы скрыть строку 1 пиксель, надеюсь, что это поможет кому-то там, и я не знаю, где разместить эту проблему, чтобы они исправить XD, удачи вам может быть сила: P