6
votes

Comment aligner les vues enfants à gauche avec un espace uniforme dans React-Native?

J'essaie de créer un menu pour mon application dans React-Native qui devrait avoir plusieurs icônes de la manière ci-dessous

Les icônes doivent être dans la même ligne et enveloppées de sorte que si l'écran est plus grand, plus d'icônes seront sur la même ligne.

Mon code actuel est comme suit

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'aqua',
    margin: 10,
  }
});

La sortie actuelle est comme ci-dessous

Les enfants le nombre peut changer à l'avenir mais j'ai besoin d'avoir un espacement sur les côtés, l'utilisation de flex-start donnera la sortie ci-dessous qui est erronée.Je veux aussi avoir un espacement des deux côtés.

Comment puis-je l'aligner à gauche et faire en sorte que les éléments aient un espace égal comme dans l'image ci-dessus?

javascript react-native

5 commentaires

alignItems: 'center' centrerait les blocs. Changez-le en alignItems: 'left' et il devrait s'aligner à gauche

sa réaction native et à gauche n'est pas prise en charge :)

Droite. Remplacez justifyContent: 'space-evenly' par justifyContent: 'flex-start' stackoverflow.com/questions/36008969/...

Copie possible de Comment justifier (gauche, droite, centre) chacun enfant indépendamment?

@AniketG flext-start J'essaie d'utiliser la même ligne, donc flex start aura plus d'espace à droite, ce qui est le problème, car c'est la même ligne, ce n'est pas un doublon

3 Réponses :

1
votes

pour Boîte , utilisez les dimensions, en fonction de la largeur de l'écran, divisez la largeur de la boîte

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
   },
  box: {
    width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
    height: 100,
    backgroundColor: 'aqua',
    margin: 10,
  }
});

5 commentaires

Quelle est la logique derrière 3.2?

pré rangée si vous avez besoin de 3 largeurs de boîte / 3 mais il se divisera également en fonction de la taille de l'écran. vous avez besoin d'un peu de gape entre chaque boîte donc je l'ai divisé avec 3.2

3 peut changer en fonction de la taille de l'écran, j'essaie un moyen de calculer cela

vous pouvez également faire de cette façon ==> width: (Dimensions.get ('window'). width / 3) - 20 // moins 20 est pour une valeur pour ajuster l'écart entre les cases, j'ai ajouté le code StyleSheet. pouvez-vous vérifier si cela fonctionne?

J'ai adopté une approche différente et j'ai résolu le problème, merci pour votre suggestion.

0
votes

Une option consiste à ajouter des «fausses» cases supplémentaires qui rempliront l'espace disponible dans la dernière ligne:

<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>

// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create({
  boxFake: {
    backgroundColor: 'transparent'
  }
});

Vous pouvez facilement calculer le nombre de «fausses» cases nécessaires par la formule:

fakeBoxes = boxesPerRow - totalBoxes% boxesPerRow

0 commentaires

0
votes

J'ai adopté une approche différente en utilisant une autre vue comme wrapper et en faisant le calcul de sa largeur, c'est plus facile de décider de la largeur des colonnes. Le seul problème est que nous devrions connaître la largeur de l'article, ce ne sera pas un problème dans mon cas. Le code sera comme ci-dessous.

import React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      width: 110
    };
  }

  render() {
    //width of child is 110
    const width = `${100 / parseInt(this.state.width / 110)}%`;
    return (
      <ScrollView>
        <View style={styles.container} onLayout={this.onLayout.bind(this)}>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
        </View>
      </ScrollView>
    );
  }

  onLayout(e) {
    if (this.state.width !== e.nativeEvent.layout.width) {
      this.setState({
        width: e.nativeEvent.layout.width
      })
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
  wrapper: {
    marginVertical: 10, alignItems: 'center'
  }
});

0 commentaires