2017-02-17 6 views
1

Ich erfahre ein Verhalten, bei dem TouchableHighlight und TouchableOpacity beim Rendern visuell reagieren (onPress wird nicht aufgerufen).TouchableHighlight und TouchableOpacity werden auf render() hervorgehoben

Eine Sache ist, dass es nur ein bisschen seltsam aussieht, wenn ich die Seite betrete und meine Taste ein kleines "Blinken" macht. Das ist seltsam, aber erträglich. Der frustrierendere Teil ist, dass, wenn ich den Zustand für die Elternkomponente ändere und somit ein Neu-Rendern() aufruft, der Knopf wieder "blinkt", so dass alle Knöpfe blinken, wenn ich den Zustand ändere.

Durch Drücken der Tasten ändert sich der Seitenzustand, und durch Drücken einer Taste werden beide Tasten "blinkend".

Ich benutze react-redux, aber das sollte dieses Verhalten nicht beeinflussen.

Der folgende Code dient nur der Veranschaulichung.

render() 
{ 
    return(
     <View> 
      <ToucableHightlight> //Click here changes state 
       <Content/> 
      </ToucableHightlight> 
      <ToucableHightlight> //Click here changes state 
       <Content/> 
      </ToucableHightlight> 
     <View> 
    ); 
} 
+0

Nur ein Schuss im Dunkeln in einem setTimeout rerendering löst aber rufen Sie versehentlich 'onPress' anstatt es zu zuweisen? Z.gl. OnPress = {this._onPressStart} 'vs' onPress = {this._onPressStart()} ' – G0dsquad

+0

Sie können den zweiten Ansatz nicht verwenden, da onPress beim ersten Rendern aufgerufen wird. Sie müssen 'onPress = {() => this._onPressStart()}' –

+0

Nein, weder behebt es. @ G0dsquad, wie können Sie das tun, wenn Sie auf 'this' zugreifen müssen? @WojtekSzafraniec das repariert es auch nicht – bloppit

Antwort

0

Ich löste das Problem. Früher habe ich während meiner Renderfunktion die "Content" -Komponenten definiert, was dazu führte, dass bei jedem Update neue (aber ähnliche) Komponenten definiert wurden. Wenn die Definitionen von "Inhalt" außerhalb der Render-Funktion platziert wurden, wurde sie repariert, so dass die Komponenten nicht mehr blinken, wenn die Seite neu gerendert wird.

Dies erklärt, warum meine Komponente bei jedem Rendern in der übergeordneten Komponente als neue Komponente gerendert wurde, aber es erklärt nicht, warum ein TouchableHighlight beim ersten Rendern blinkt.

Während des anfänglichen Renderns blinkende Tasten sind für mich akzeptabel - Tasten, die bei einem Statuswechsel blinken, sind nicht akzeptabel.

So bin ich jetzt ausreichend glücklich.

0

Nicht sicher, ob es ist, weil ich eine neuere Version ausführe, aber ich fand, dass dieses blinkende Verhalten nur beim ersten Klicken geschieht.

Meine Lösung war Putting den Code, der

  <TouchableOpacity 
      onPress={function() { 
       setTimeout(function() { 
       _this.setState({myState: 'someValue'}) 
       }); 
      }} 
      > 
Verwandte Themen