Ich bin wirklich neu in React Native und frage mich, wie ich eine Komponente ausblenden / anzeigen kann.
Hier ist mein Testfall:
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input: text})} />
<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
Ich habe eine TextInput
Komponente. Ich möchte anzeigen, TouchableHighlight
wann der Eingang den Fokus erhält, und dann ausblenden, TouchableHighlight
wann der Benutzer die Abbrechen-Taste drückt.
Ich weiß nicht, wie ich auf die TouchableHighlight
Komponente "zugreifen" soll , um sie in meinen Funktionen zu verbergen / anzuzeigen showCancel/hideCancel
.
Wie kann ich die Schaltfläche von Anfang an ausblenden?
javascript
react-native
Crysfel
quelle
quelle
Antworten:
Ich würde so etwas machen:
quelle
return ''
return null
{someBoolVal && <Component />}
und es wird nur angezeigt, wenn der Bool-Wert wahr ist.In Ihrer Renderfunktion:
Dann machen Sie einfach:
quelle
{ this.state.showTheThing && (<Text>foo</Text> && <Text>bar</Text>)}
"bar" mache , in der Benutzeroberfläche angezeigt wird. Ich würde erwarten, dass "foo" und "bar" angezeigt werden. Was ich tun musste, um dies zu lösen, ist anzurufen{ this.state.showTheThing && (<Text>foo</Text>} { this.state.showTheThing && (<Text>bar</Text>}
&&
Elemente nicht kombinieren{ this.state.showTheThing && (<View><Text>foo</Text><Text>bar</Text></View>)}
{this.state.hasPic && <Button title="Go to next step" onPress={this._nextStep} />}
<React.Fragment><Text>Foo</Text><Text>Bar></Text></React.Fragment>
Beim Reagieren oder Reagieren nativ funktioniert die Art und Weise, wie Komponenten ausgeblendet / angezeigt oder hinzugefügt / entfernt werden, nicht wie in Android oder iOS. Die meisten von uns denken, dass es eine ähnliche Strategie geben würde
Die Art und Weise, wie einheimische Arbeiten reagieren, ist jedoch völlig anders. Die einzige Möglichkeit, diese Art von Funktionalität zu erreichen, besteht darin, Ihre Komponente in Ihr DOM aufzunehmen oder aus dem DOM zu entfernen.
Hier in diesem Beispiel werde ich die Sichtbarkeit der Textansicht basierend auf dem Klick auf die Schaltfläche einstellen.
Die Idee hinter dieser Aufgabe ist das Erstellen einer Statusvariablen namens state, bei der der Anfangswert auf false gesetzt ist, wenn das Ereignis zum Klicken auf die Schaltfläche auftritt, und der Wert dann umgeschaltet wird. Jetzt werden wir diese Statusvariable während der Erstellung der Komponente verwenden.
Das einzige, was in diesem Snippet zu bemerken ist
renderIf
, ist, dass es sich tatsächlich um eine Funktion handelt, die die an sie übergebene Komponente basierend auf dem an sie übergebenen booleschen Wert zurückgibt.quelle
In render () können Sie JSX bedingt anzeigen oder null zurückgeben wie in:
quelle
Ich musste zwischen zwei Bildern wechseln. Beim bedingten Umschalten zwischen ihnen gab es eine Verzögerung von 5 Sekunden, ohne dass ein Bild angezeigt wurde.
Ich benutze den Ansatz von Downvoted Amos Antwort. Als neue Antwort veröffentlichen, da es schwierig ist, Code mit der richtigen Formatierung in einen Kommentar einzufügen.
Renderfunktion:
Stile:
quelle
Die meiste Zeit mache ich so etwas:
Wenn Sie neu in der Programmierung sind, muss diese Zeile für Sie seltsam sein:
Diese Zeile entspricht
Sie können jedoch keine if / else-Bedingung in JSX-Inhalt schreiben (z. B. den return () - Teil einer Renderfunktion), daher müssen Sie diese Notation verwenden.
Dieser kleine Trick kann in vielen Fällen sehr nützlich sein, und ich empfehle Ihnen, ihn in Ihren Entwicklungen zu verwenden, da Sie einen Zustand schnell überprüfen können.
Grüße,
quelle
Verbergen und Zeigen Eltern Ansicht
Activity Indicator
Verstecken und anzeigen wie folgt
Vollständige Referenz
On Button drückt den eingestellten Status wie folgt
Wenn du dich verstecken musst
quelle
Das Layout von React Native unterstützt
display
Eigenschaften, ähnlich wie CSS. Mögliche Werte:none
undflex
(Standard). https://facebook.github.io/react-native/docs/layout-props#displayquelle
position: absolute
, es versteckt es nicht wirklich! Bekannter Fehler von 0,54 - 0,59 (mindestens): github.com/facebook/react-native/issues/18415benutz einfach
quelle
Deklarieren Sie sichtbar als falsch, damit standardmäßig Modal / Ansicht ausgeblendet werden
Beispiel = () => {
}}
** Funktionsaufruf **
quelle
Ich hatte das gleiche Problem, bei dem ich Ansichten ein- / ausblenden wollte, aber ich wollte wirklich nicht, dass die Benutzeroberfläche herumspringt, wenn Dinge hinzugefügt / entfernt werden oder sich unbedingt mit dem erneuten Rendern befassen.
Ich habe eine einfache Komponente geschrieben, um damit für mich umzugehen. Standardmäßig animiert, aber einfach umzuschalten. Ich habe es mit einer Readme- Datei auf GitHub und NPM gestellt , aber der gesamte Code ist unten.
npm install --save react-native-hideable-view
quelle
visible && (...)
.Eine zusätzliche Option besteht darin, die absolute Positionierung über das Styling anzuwenden und die verborgene Komponente in Koordinaten außerhalb des Bildschirms zu setzen:
Anders als in einigen der vorherigen Vorschläge würde dies Ihre Komponente vor der Ansicht verbergen, ABER sie wird auch gerendert (im DOM behalten), wodurch sie wirklich unsichtbar wird .
quelle
Wenn die Komponente geladen, aber ausgeblendet bleiben soll, können Sie die Deckkraft auf 0 setzen. (Ich brauchte dies zum Beispiel für die Expo-Kamera.)
quelle
Sie können mein Modul reagieren-native-Anzeige verwenden , um Komponenten ein- / auszublenden.
quelle
Das folgende Beispiel codiert in Typoskript mit Hooks.
quelle
quelle
Sehr leicht. Wechseln Sie einfach zu () => this.showCancel () wie folgt:
quelle
Ich benutze nur die folgende Methode, um eine Schaltfläche auszublenden oder anzuzeigen. hoffe es wird dir helfen. Nur den Status zu aktualisieren und Hide CSS hinzuzufügen, reicht mir
quelle
Eigentlich in der iOS-Entwicklung,
react-native
wenn ichdisplay: 'none'
oder so etwas benutze :Das iOS lädt nichts anderes von der Image-Komponente wie
onLoad
oder usw., daher habe ich mich für Folgendes entschieden:quelle
Die einzige Möglichkeit, eine Komponente in React Native anzuzeigen oder auszublenden, besteht darin, einen Wert eines Parameters mit App-Status wie
state
oder zu überprüfenprops
. Ich habe ein vollständiges Beispiel wie folgt angegeben:quelle
Wenn Sie es ausblenden möchten, aber den von der Komponente belegten Platz beibehalten möchten, sollte die
visibility: hidden
Einstellung von CSS im Stil der Komponente ausreichenopacity: 0
.Abhängig von der Komponente sind möglicherweise weitere Schritte zum Deaktivieren der Funktionalität erforderlich, da eine Interaktion mit einem unsichtbaren Element möglich ist.
quelle
Sie können die Bedingungen zum Ein- und Ausblenden der Komponenten verwenden
quelle
das ist alles. Viel Spaß beim Codieren ...
quelle