2017-02-17 7 views
1

Я испытываю поведение, когда TouchableHighlight и TouchableOpacity визуально реагируют на рендеринг (onPress не вызывается).TouchableHighlight и TouchableOpacity получают выделение в render()

Одно дело в том, что это выглядит немного странно, когда я вхожу на страницу, а моя кнопка делает небольшое «мигание». Это странно, но терпимо. Более неприятная часть заключается в том, что если я изменяю состояние для родительского компонента и, таким образом, вызывается повторное рендеринг(), кнопка снова начнет мигать, делая все кнопки мигающими всякий раз, когда я изменяю состояние.

Нажатие кнопок изменяет состояние страницы, и нажатие кнопки делает обе кнопки «мигающими».

Я использую реакцию-редукцию, но это не должно влиять на это поведение.

Код, указанный ниже, просто для иллюстрации.

+0

Просто выстрел в темноте, но вы случайно вызова 'onPress' вместо назначения его? Например, 'onPress = {this._onPressStart} 'vs' onPress = {this._onPressStart()}' – G0dsquad

+0

вы не можете использовать второй подход, потому что onPress будет вызываться при первом рендере. Вы должны использовать 'onPress = {() => this._onPressStart()}' –

+0

Нет, не исправляет. @ G0dsquad, как вы можете это сделать, если вам нужно получить доступ к 'this'? @WojtekSzafraniec это не исправляет это – bloppit

ответ

0

Я решил проблему. Ранее во время моей функции рендеринга я определял компоненты «Content», в результате чего в каждом обновлении определялись новые (но похожие) компоненты. Установка определений «Контент» вне функции рендеринга исправила его, чтобы компоненты больше не мигали при повторной визуализации страницы.

Это объясняет, почему мой компонент был представлен как новый компонент для каждого рендеринга в родительском компоненте, но он не объясняет, почему TouchableHighlight мигает во время его первоначального рендеринга.

Кнопки, мигающие во время первоначального рендера, приемлемы для меня - кнопки, мигающие при любых изменениях состояния, не являются.

Так что я сейчас достаточно счастлив.

0

Не уверен, что это потому, что я запускаю более позднюю версию, но я обнаружил, что это мигающее поведение происходит только при первом щелчке.

Мое решение было положить код, который вызывает отрисовки в SetTimeout

  <TouchableOpacity 
      onPress={function() { 
       setTimeout(function() { 
       _this.setState({myState: 'someValue'}) 
       }); 
      }} 
      > 
Смежные вопросы