2015-07-31 9 views
12

Ich habe eine harte Zeit, um mit diesem Fehler fertig zu werden.Fehler: Invariante Verletzung: Berührbare Kind muss entweder native oder Forward SetNativeProps zu einem nativen Komponentenstapel

Touchable child setNativeProps error

Ich verstehe nicht, warum? Ich habe eine untergeordnete Komponente, die keine benutzerdefinierte Komponente verwendet. Ich wickelte die Text oder Image oder Icon in eine View Komponente und dann umhüllt sie in TouchableHighlight immer noch den Fehler auf einer bestimmten Seite, aber nicht auf anderen Seiten, die das gleiche tun.

<TouchableHighlight 
     onPress={this.changeTo} style={PictureStyles.btnClickContain} 
     underlayColor='#042417'> 
     <View 
     style={PictureStyles.btnContainer}> 
     <Icon 
      name='fontawesome|calendar' 
      size={25} 
      color='#042' 
      style={PictureStyles.btnIcon}/> 
     <Text style={PictureStyles.btnText}>Book</Text> 
     </View> 
    </TouchableHighlight> 

Antwort

14

konnte ich einen ähnlichen Fehler in meiner Anwendung beheben, indem Sie die Anweisungen über Composite components and setNativeProps in der Dokumentation folgenden setNativeProps, um ein Kind zu übermitteln. Aus der Dokumentation:

Unten ist Ihr Code mit den gleichen Änderungen aktualisiert die für mich gearbeitet. Ich habe auch react-native-icons verwendet, wie es aussieht, als ob Sie auch sind.

Die einzigen Änderungen sind die setNativeProps Verfahren und eine ref auf dem View Erstellen des stürzt sofort, wenn ich `Icon` Element dort und starten Sie die Eingabe ref callback syntax

var MyComponent = React.createClass({ 
    setNativeProps (nativeProps) { 
    this._root.setNativeProps(nativeProps); 
    } 

    render() { 
    return (
     <TouchableHighlight 
     onPress={this.changeTo} style={PictureStyles.btnClickContain} 
     underlayColor='#042417'> 
     <View 
      ref={component => this._root = component} 
      style={PictureStyles.btnContainer}> 
      <Icon 
      name='fontawesome|calendar' 
      size={25} 
      color='#042' 
      style={PictureStyles.btnIcon}/> 
      <Text style={PictureStyles.btnText}>Book</Text> 
     </View> 
     </TouchableHighlight> 
    ); 
    } 
}) 
+1

In meinem Fall verwenden. Wenn ich es entferne, funktioniert alles eine Weile gut und stürzt dann auch ab: / – owca

Verwandte Themen