web-dev-qa-db-fra.com

Comment positionner un bouton réactif natif au bas de mon écran pour fonctionner sur plusieurs périphériques ios

Je suis jeune pour réagir à la recherche native sur le Web pour des tutoriels qui pourraient m'aider avec ce problème, mais je n'ai rien trouvé. Je sais comment déplacer les boutons du point A à B sur mon écran. Le problème, c’est que je n'arrive tout simplement pas à le fixer au bas pour travailler sur différents facteurs de forme de mon émulateur iOS. Jusque là, j’ai essayé marginTop qui enlève le bouton à l’écran mais dès que je change l’émulateur pour un écran de taille différente, le bouton monte un peu. Je demande si je peux obtenir des conseils sur la façon dont je peux régler cela pour fonctionner sur différents écrans iOS.

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

Le code ci-dessus est mon bouton. 

javascriptiosreactjsreact-native
7
youngreactNative

Vous pouvez utiliser la position absolue pour mettre les choses où vous voulez ...

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

va mettre en bas de l'écran, côté gauche ....

18
parker

Voici comment j'ai placé le bouton flottant en bas à droite de l'écran.

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

Utilisez les styles suivants pour conteneur et bouton:

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

Sortie:

 enter image description here

7
katwal-Dipak

Vous pouvez essayer le code ci-dessous à l’adresse https://facebook.github.io/react-native/docs/flexbox.html jusqu'à ce que ce lien ne fonctionne plus.

Fondamentalement, vous divisez l’écran en 3 parties: défilement supérieur et bas. Le code ci-dessous ne fait que 3 vues pour plus de simplicité (pas de défilement, remplacez celle du milieu par une ScrollView pour avoir quelque chose de plus utile.

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