web-dev-qa-db-fra.com

Disposition à 2 colonnes avec flexBox on React Native

J'essaie de faire une mise en page à deux colonnes en React Native à partir d'une liste d'articles. Cela ne semble fonctionner que si je définis la largeur des articles, je voudrais définir juste un pourcentage de la largeur du parent (0,5 donnerait une disposition sur 2 colonnes, mais 0,25 ferait une sur 4 colonnes). Cela peut-il être fait?

export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, {width:width}]}>
        <View style={styles.item}><Text>{'item1'}</Text></View>
        <View style={styles.item}><Text>{'item2'}</Text></View>
        <View style={styles.item}><Text>{'item3'}</Text></View>
        <View style={styles.item}><Text>{'item4'}</Text></View>
        <View style={styles.item}><Text>{'item4'}</Text></View>
        <View style={styles.item}><Text>{'item5'}</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item :{
    flex: 0.5, //why this doesnt work???
    // width: 150, //using fixed item width instead of flex: 0.5 works
    height: 100,
    padding: 10,
    backgroundColor: 'red',
    // flexGrow: 1,
    // flexShrink: 0,
  }
});

Vous pouvez jouer avec lui ici: https://snack.expo.io/SyBjQuRxm

Équivalent de travail CSS: https://codepen.io/klamping/pen/WvvgBX?editors=11

Évidemment, je pourrais faire quelque chose comme créer un conteneur pour chaque colonne, mais ce n'est pas le point:

render() {
    return (
      <View style={[styles.container, {width:width}]}>
        <View style={styles.column1}>
             <View style={styles.item}><Text>{'item1'}</Text></View>
             <View style={styles.item}><Text>{'item2'}</Text></View>
             <View style={styles.item}><Text>{'item3'}</Text></View>
        </View>
        <View style={styles.column2}>
             <View style={styles.item}><Text>{'item4'}</Text></View>
             <View style={styles.item}><Text>{'item4'}</Text></View>
             <View style={styles.item}><Text>{'item5'}</Text></View>
        </View>
      </View>
    );
  }
react-nativeflexbox
10
Xavi A.

C'est possible si vous utilisez des valeurs de pourcentage pour les largeurs:

<View style={styles.container}>
  <View style={styles.item}>
    ...
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start' // if you want to fill rows left to right
  },
  item: {
    width: '50%' // is 50% of container width
  }
})
25
dentemm