1
votes

React-native: afficher le contenu sur deux lignes

Je souhaite afficher 6 options par ligne au lieu de n'afficher qu'une seule option par ligne. Je suis encore nouveau dans React-Native Voici le code:

import React from 'react';
import {fromJS} from 'immutable';
import {ScrollView, StyleSheet, TouchableOpacity} from 'react-native';
import {Text} from 'src/components';
import Option from './OptionVariable';
import {checkOption} from 'src/modules/product/helper';
import {margin} from 'src/components/config/spacing';

class AttributeVariable extends React.Component {
  onSelectOption = (option) => {
    const {onSelectAttribute, attribute} = this.props;
    onSelectAttribute(attribute.get('id'), attribute.get('name'), option.get('option'));
  };
  render() {
    const {attribute, meta_data, variations} = this.props;
    // Attribute selected
    const attributeSelected = meta_data.find(attr => attr.get('id') === attribute.get('id') && attr.get('name') === attribute.get('name'));

    return (
      <>
        <Text>
          {attribute.get('name')}: <Text colorSecondary>{attributeSelected ? attributeSelected.get('option') : ''}</Text>
        </Text>
        <ScrollView
          style={styles.attribute}
          vertical
          showsHorizontalScrollIndicator={false}>
          {attribute.get('options').map(option => {
            const disabled = meta_data.size === 0 ? false : !checkOption(variations, meta_data, fromJS({
              id: attribute.get('id'),
              name: attribute.get('name'),
              option: option.get('option'),
            }));

            return (
              <TouchableOpacity
                activeOpacity={disabled ? 1 : 0}
                key={option}
                onPress={() => disabled ? {} : this.onSelectOption(option)}
              >
                <Option
                  type={attribute.get('type')}
                  selected={attributeSelected && option.get('option') === attributeSelected.get('option')}
                  disabled={disabled}
                  option={option}
                />
              </TouchableOpacity>
            )
          })}
        </ScrollView>

      </>
    );
  }
}
const styles = StyleSheet.create({
  attribute: {
    marginTop: margin.small,
  },
});

export default AttributeVariable;

Voici à quoi ça ressemble:

J'espère que tout est clair pour vous. Désolé pour mon mauvais anglais, ce n'est pas ma langue principale .... Merci d'avance pour toute aide.

react-native

0 commentaires

3 Réponses :

2
votes

vous pouvez dire dans votre style d'attribut:

attribute: {
 marginTop: margin.small,
 flexDirection: 'row'
},

donc il devrait s'aligner en lignes au lieu de colonnes

Cela devrait vous aider à en savoir plus sur le style des composants dans react natif: https://facebook.github.io/react-native/docs/flexbox

2 commentaires

Merci mais j'obtiens toujours le même résultat et cela n'a pas fonctionné.

Il continue en colonnes? pourriez-vous montrer le code des composants Option? Peut-être que vous essayez de supprimer les accessoires verticaux de ScrollView, voulez-vous qu'il soit horizontalement?

0
votes

Essayez d'utiliser le composant Flatlist (au lieu de ScrollView) en passant les accessoires horizontal = {true}.

Comme ceci:

FlatList
    horizontal={true}
    data={attribute.option}
    renderItem={({ item }) => "Pass your component"}
    keyExtractor={item => item.id}
/>

0 commentaires

0
votes

MISE À JOUR 2: J'ai utilisé View au lieu de ScrollView avec les styles suivants et cela a très bien fonctionné.

container: {
    marginTop: margin.small,
    flexDirection: 'row-reverse',
    position: 'relative',
    width: 'auto',
    alignSelf: 'stretch',
    maxWidth: 29,
    height: 29,
    marginBottom: margin.big,
    borderRadius: borderRadius.base,
    borderWidth: 1,
  },

UPDATE 1: em>

J'ai résolu le problème en utilisant ceci:

<View style={[styles.container, ]}
        horizontal
        style={{AlignContent: 'flex-start', flexDirection: 'row', alignItems: 'flex-start',}}
          style={styles.attribute}
          showsHorizontalScrollIndicator={false}>

J'ai changé la taille de l'option pour qu'elles apparaissent toutes sur la même ligne (pas exactement ce que Je veux mais ça marche)

Si quelqu'un a une meilleure réponse, merci de la partager.

0 commentaires