wie das Aussehen einer Komponente zu steuern, reagieren nativen

Question

ich das Aussehen eines Text Komponente

In meinem Code die Text Komponente nur steuern möchten nur angezeigt wird, wenn ein bestimmter Image

gemacht wird

Diese Text Komponente sollte nach 5 Sekunden nach dem bestimmten Image angezeigt werden

Wie kann ich dies hier ist meine Beispielcode:

renderImage1() { 
 
    return (
 
     <Image 
 
     source={require('./Images/image1.png')} 
 
     style={styles.image1Style} > 
 
     <Text   // I need to control this component's appearance 
 
     style={styles.textStyle} 
 
     onPress={() => this.setStep(2)}> 
 
     Touch To Play 
 
     </Text> 
 
     </Image> 
 
    ); 
 
    }

Answer 1

Basierend auf Ihren Kommentar:

jetzt seine beiden Rendering, was ich will, ist das Bild zu zeigen, dann nach ca. 5 Sekunden, um den Text für den Benutzer anzeigen

Ich könnte vorschlagen:
1. Versuchen Verwenden Sie this.state, um eine Anzeige-Prop zu erstellen, die entweder boolesche Werte (für if-Anweisung) oder "keine"/"initial" -Werte (für Anzeigetext-Stil-Prop) oder "sichtbare"/"versteckte" Werte (für Sichtbarkeit) verwendet Textstil prop).
2. Setzen Sie timeout auf diesen Funktionsaufruf this.setState ({showText:! ShowText}).
3. Und für If-Anweisung Lösung machen Sie Ihre Rendermethode rendern entweder Bild mit Text oder ohne basierend auf this.state.display Wahrheit oder Falschheit.

render() { 
    if (this.state.display) { 
     return <Image><Text></Text></Image> 
    } 
    return <Image></Image> 
} 

4. Für Display oder Sichtbarkeit soltions Verwendung ternary opertor zwischen display/visibility Ihrer Textkomponente in ihrem Stil schwanken:

Anzeige:

<Text 
    style={{ display: this.state.display }) 
/> 

Sicht:

<Text 
    style={{ visibility: this.state.visibility }) 
/>