web-dev-qa-db-fra.com

Comment centrer les composants en utilisant Flex dans React Native?

J'ai du mal à centraliser mes composants en écran en utilisant CSS.

Voir mon App.js:

import { Container } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';

import Screen from './ScreenContainer';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FF6666',
    flex: 1
  }
});

const App = () => (
  <Provider store={store}>
    <Container style={styles.container}>
      <Screen />
    </Container>
  </Provider>
);

export default App;

Maintenant, voyez mon ScreenContainer.js

import { Container, Content, Form, Input, Label, Item } from 'native-base';
import React from 'react';

import AppLogo from '../components/AppLogo';

const Screen = () => (
  <Container>
    <Content>
      <AppLogo />
      <Form>
        <Item floatingLabel last>
          <Label>Username</Label>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>
);

export default Screen;

Ce code donne cet écran:

enter image description here

Mais, je veux que l'écran reste avec ce format:

enter image description here

Quand je change le code pour:

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#FF6666',
    flex: 1
  }
});

Mon application renvoie cet écran:

enter image description here

cssreactjsreact-nativeflexboxreact-native-android
6
FabianoLothor

C'est fait:

import { Container, Content, Form, Input, Label, Item } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';

import AppLogo from '../components/AppLogo';

const styles = StyleSheet.create({
  container: {},
  content: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  },
  form: {
    width: '100%'
  },
  item: {}
});

const Screen = () => (
  <Container style={styles.container}>
    <Content contentContainerStyle={styles.content}>
      <AppLogo />
      <Form style={styles.form}>
        <Item floatingLabel last>
          <Label>Username</Label>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>
);

export default Screen;
3
FabianoLothor

Vous voudrez peut-être passer du temps à lire la page Mise en page avec Flexbox dans la documentation React Native; comme cela vous donner une meilleure idée de la façon d'atteindre ce que vous recherchez.

Vous pouvez accéder à la React Native Flexbox à laquelle j'ai fait référence à: https://facebook.github.io/react-native/docs /flexbox.html

Dans React Native, un composant peut spécifier la disposition de ses enfants en utilisant l'algorithme flexbox. Flexbox est conçu pour fournir une disposition cohérente sur différentes tailles d'écran.

Vous avez déjà utilisé un peu de Flexbox, que vous le sachiez ou non, avec les styles CSS flex: 1; et alignItems: 'center';.

Solution

Dans React Native, Flexbox fonctionne de la même manière que sur le Web, sauf que les valeurs par défaut sont différentes, avec flexDirection par défaut sur colonne au lieu de ligne).

Pour cette raison, nous pouvons utiliser la règle alignItems au style d'un composant pour déterminer l'alignement des enfants le long de l'axe secondaire (vertical).

L'ajout de la règle suivante à vos éléments enfants les fera prendre toute la largeur de l'écran; cependant, pensez à ajouter un max-width pour les mises en page paysage et les écrans plus grands (par exemple une tablette):

childSelector {
    alignItems: stretch;
}

Pour centrer le contenu de votre conteneur horizontalement et verticalement, appliquez les règles de style suivantes:

alignItems: 'center'
justifyContent: 'center'
2
Trent