Ich möchte einen weißen Balken einfügen, der die gesamte Breite am unteren Bildschirmrand einnimmt. Dazu habe ich überlegt, die absolute
Positionierung mit den geerbten flexbox
Parametern zu verwenden.
Mit dem folgenden Code macht es so etwas wie diese .
Hier ist mein Code:
var NavigationBar = React.createClass({
render: function() {
return(
<View style={navigationBarStyles.navigationBar}>
//Icon 1, Icon 2...
</View>
);
}
});
var Main = React.createClass({
render: function() {
return(
<View style={mainStyles.container}>
<NavigationBar />
</View>
);
}
});
var mainStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#456783',
}
});
var navigationBarStyles = StyleSheet.create({
navigationBar: {
backgroundColor: '#FFFFFF',
height: 30,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
justifyContent: 'space-between'
},
});
Ich bin neu im Styling in CSS und nicht alle Eigenschaften sind in React-Native verfügbar. Also jede Hilfe ist dankbar, danke :)
javascript
css
react-native
ilansas
quelle
quelle
height:100%
tuntop:0, bottom:0
.left:0, right:0
und nicht hinzufügentop:0
, wenn Sietop:0
und festlegenbottom:0
, wird der Vollbildmodus angezeigt.top:0
undbottom:0
100%“, um @Premasagar: als Ersatz für` `Höhe gearbeitetleft
,top
,right
undbotton
auf 0 und funktioniert perfekt.Der erste Schritt wäre das Hinzufügen
Wenn Sie dann das Element in voller Breite haben möchten, fügen Sie hinzu
Wenn Sie das Element dann unten platzieren möchten, fügen Sie hinzu
Wenn Sie das Element oben positionieren möchten, ersetzen Sie es
bottom: 0
durchtop: 0
quelle
Diese Lösung hat bei mir funktioniert:
quelle