Ich erstelle ein Formular in React Native und möchte, dass mein TextInput
s 80% der Bildschirmbreite ausmacht.
Mit HTML und normalem CSS wäre dies unkompliziert:
input {
display: block;
width: 80%;
margin: auto;
}
Außer dass React Native die display
Eigenschaft, die prozentualen Breiten oder die automatischen Ränder nicht unterstützt .
Was soll ich stattdessen tun? Es gibt einige Diskussionen über dieses Problem im Issue-Tracker von React Native, aber die vorgeschlagenen Lösungen scheinen böse Hacks zu sein.
javascript
css
reactjs
react-native
Mark Amery
quelle
quelle
react-native
wirdflex
für die Größen und Positionen der Elemente verwendet . Ich bin nicht sicher, aber vielleichtflex-basis
ist es das, was Sie brauchen: Überprüfen Sie dies und dasflex: 0.8
kann die Arbeit machen.Antworten:
Ab React Native 0,42
height:
undwidth:
Prozentsätze akzeptieren.Verwenden Sie
width: 80%
in Ihren Stylesheets und es funktioniert einfach.Bildschirmfoto
Live-Beispiel
Breite / Höhe des Kindes als Anteil des Elternteils
Code
quelle
Das sollte Ihren Bedürfnissen entsprechen:
quelle
Wenn Sie lediglich die Eingabe relativ zur Bildschirmbreite vornehmen möchten, können Sie auf einfache Weise Abmessungen verwenden:
Ich habe hier ein Arbeitsprojekt eingerichtet . Code ist auch unten.
https://rnplay.org/apps/rqQPCQ
quelle
Fügen Sie in Ihr StyleSheet einfach Folgendes ein:
anstatt:
Codierung weiter ........ :)
quelle
Sie können auch React-Native-Extended-Stylesheet ausprobieren , das den Prozentsatz für Apps mit einfacher Ausrichtung unterstützt:
quelle
Die Technik, mit der ich die prozentuale Breite des übergeordneten Elements habe, besteht darin, eine zusätzliche Abstandshalteransicht in Kombination mit einer Flexbox hinzuzufügen. Dies gilt nicht für alle Szenarien, kann jedoch sehr hilfreich sein.
Auf geht's:
Grundsätzlich ist die Flex-Eigenschaft die Breite relativ zum "Gesamt" -Flex aller Elemente im Flex-Container. Wenn also alle Elemente 100 ergeben, haben Sie einen Prozentsatz. Im Beispiel hätte ich die Flex-Werte 6 und 4 für das gleiche Ergebnis verwenden können, damit es noch flexibler ist.
Wenn Sie die prozentuale Breitenansicht zentrieren möchten: Fügen Sie zwei Abstandhalter mit der halben Breite hinzu. Im Beispiel wäre es also 2-6-2.
Natürlich ist das Hinzufügen der zusätzlichen Ansichten nicht das Schönste auf der Welt, aber in einer realen App kann ich mir vorstellen, dass der Abstandshalter unterschiedliche Inhalte enthält.
quelle
Ich habe eine aktualisierte Lösung (Ende 2019), um 80% Breite des übergeordneten Responsive mit Hooks zu erhalten , funktioniert es auch, wenn sich das Gerät dreht.
Sie können mit
Dimensions.get('window').width
Gerätebreite erhalten in diesem Beispiel sehen Sie , wie Sie es tun können Als Reaktionquelle
So habe ich die Lösung bekommen. Einfach und süß. Unabhängig von der Bildschirmdichte:
quelle
Der einfachste Weg, dies zu erreichen, ist das Anwenden der Breite auf die Ansicht.
quelle