webentwicklung-frage-antwort-db.com.de

So positionieren Sie einen React Native-Button am unteren Bildschirmrand, um auf mehreren iOS-Geräten zu arbeiten

Ich bin jung, um die native Suche im Web nach Tutorials zu beantworten, die mir bei diesem Problem helfen könnten, aber nichts gefunden haben. Ich kann die Schaltflächen von Punkt A nach B auf meinem Bildschirm verschieben. Die Sache ist, ich kann es einfach nicht scheinen, es unten zu fixieren, um an verschiedenen Formfaktoren meines ios-Emulators zu arbeiten. Bisher habe ich marginTop ausprobiert, wodurch der Button auf den Bildschirm gedrückt wird, aber sobald ich den Emulator auf eine andere Bildschirmgröße ändere, geht der Button etwas höher. Ich frage Sie, ob ich eine Anleitung erhalten kann, wie ich dies auf verschiedenen iOS-Bildschirmen einstellen kann.

  submitButton: {
    height: 85,
    flex: 1,
    backgroundColor: "#FFBB34",
    borderColor: "#555555",
    borderWidth: 0,
    borderRadius: 0,
    marginTop: 200,
    justifyContent: "flex-start"
}

Der Code oben ist mein Button. 

7

Sie können die absolute Position verwenden, um Dinge dorthin zu legen, wo Sie möchten ...

submitButton: {
    position: 'absolute',
    bottom:0,
    left:0,
}

wird am unteren Rand des Bildschirms platziert, linke Seite ....

18
parker

So platziere ich die schwebende Schaltfläche unten rechts auf dem Bildschirm.

return (
        <View style={mainConatinerStyle}>
            {this.renderSwiper()}
            {this.renderFloatingMenu()}
        </View>
    );

Verwenden Sie die folgenden Stile für Container und Schaltfläche:

mainConatinerStyle: {
    flexDirection: 'column',
    flex: 1
},floatingMenuButtonStyle: {
    alignSelf: 'flex-end',
    position: 'absolute',
    bottom: 35
}

Ausgabe:

 enter image description here

7
katwal-Dipak

Sie können den folgenden Code unter https://facebook.github.io/react-native/docs/flexbox.html ausprobieren, bis der Link nicht mehr funktioniert.

Grundsätzlich teilen Sie den Bildschirm in 3 Teile auf, der obere Bildlauf und der untere Teil. Der folgende Code führt der Einfachheit halber nur drei Ansichten aus (kein Scrollen, ersetzen Sie einfach die mittlere durch eine ScrollView, um etwas nützlicher zu sein.).

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{height: 50, backgroundColor: 'powderblue'}} />
        <View style={{flex:1, backgroundColor: 'skyblue'}} />
        <View style={{height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
0
boatcoder