Comment Positionner une Réagir Natif Bouton au bas de mon écran de travailler sur de multiples appareils ios

Je suis jeune pour réagir natif de recherche sur le web pour des tutoriels qui pourrait m'aider avec ce problème, mais n'ont pas trouver quoi que ce soit. Je sais comment faire pour déplacer les boutons du point A au point B sur mon écran. Le truc c'est que je juste ne peux pas sembler obtenir pour être fixé à la partie inférieure de travailler sur différents facteurs de forme de mon émulateur ios.
Jusqu'à présent j'ai essayé marginTop qui prend sur le bouton à l'écran mais dès que je change l'émulateur pour une autre taille de l'écran le bouton monte un peu. Je demande puis-je obtenir des conseils comme comment je peut régler ce de travailler sur différents ios écrans.

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

Le code ci-dessus est de mon bouton.

Bon, je vais répondre à ma propre question pour de nombreux utilisateurs qui veulent savoir le bien que je pense que mon problème était la compréhension de flexbox. Le cas que vous avez besoin de savoir comment créer des lignes d'une colonne qui se tiendra les boutons comme divs j'espère que cela aide les autres à comprendre comment la position des boutons pour but rnplay.org/apps/5N7vJA

OriginalL'auteur youngreactNative | 2016-04-04

  1. 18

    Vous pouvez utiliser la position absolue de mettre les choses où vous le souhaitez...

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

    mettra en bas de l'écran, à gauche....

    OriginalL'auteur parker

  2. 7

    Voici comment j'ai placé le bouton flottant dans le coin inférieur droit de l'écran.

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

    Utiliser les styles suivants pour conteneur & bouton:

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

    De sortie:

    Comment Positionner une Réagir Natif Bouton au bas de mon écran de travailler sur de multiples appareils ios

    a travaillé pour moi.Merci

    OriginalL'auteur katwal-Dipak

  3. 0

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

    Fondamentalement, vous êtes le fractionnement de l'écran en 3 morceaux, défilement haut et bas. Le code ci-dessous est à seulement 3 points de vue pour des raisons de simplicité (pas de défilement, il suffit de remplacer celui du milieu avec une ScrollView avoir somethign 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>
    );
  }

    OriginalL'auteur boatcoder