web-dev-qa-db-fra.com

React séparateur natif FlatList entre les colonnes

J'ai une FlatList avec plusieurs colonnes:

    <FlatList
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      ...
    </FlatList>

Et un séparateur de ligne:

  renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'red',
        height: 0.5,
      }}
    />
  );

Mais le séparateur n'apparaît qu'entre les lignes, pas entre les colonnes (même si j'ajoute width: 0.5

Voir sur expo

cssreact-nativereact-native-flatlist
14
Avery235

vous pouvez simplement ajouter une condition if else à l'intérieur de renderItems et vérifier le module d'index pour ajouter un séparateur .. J'utilise juste celui-ci et tout fonctionne très bien.

quelque chose comme :-

_renderItem = ({item,index}) => {
   return(
      <View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}>
         <Text>{item.key}</Text>
      </View>
   )
}

j'espère que ceci vous aidera.

11
Hazim Ali

Désolé, je n'ai pas non plus trouvé de moyen d'ajouter un séparateur de colonnes en utilisant les propriétés dans le composant de liste plate, j'ai donc ajouté la vue en dehors du composant de texte dans l'élément de rendu comme ceci:

export default class App extends Component {

 render() {
  return (
   <View style={styles.view}>
    <FlatList
      data={['1', '2', '3', '4', '5', '6', '7', '8']}
      numColumns={4}
      renderItem={({ item }) => (
        <View style={styles.separator}>
          <Text style={styles.text}>{item}</Text>
        </View>
      )}
    />
   </View>
  );
 }
}

const styles = StyleSheet.create({
 view: {
  paddingTop: 30,
 },
 text: {
  flex: 1,
  fontSize: 40,
  textAlign: 'center'
 },
 separator: {
  flex: 1, 
  borderWidth: 1, 
  borderColor: 'red'
 },
});

et voici le résultat:

enter image description here

J'espère que cela peut vous aider :)

1
Syauqi Rahmat Sugara

Vous pouvez fournir une marge pour chaque article et une marge négative pour le conteneur. Il s'agit d'une astuce très courante pour la mise en page CSS flexible.

  renderItem = (sale) => {
    const {item, index} = sale;
    return (
      <View style={{flex:1, backgroundColor:'#f00', margin:20}}>  ### LOOK AT HERE ###
      </View>
    )
  };

  render() {
    return (
    <View style={{flex:1,}} >
      <FlatList
        style={{ margin:-20}}   ### LOOK AT HERE ###
        data={this.state.sales}
        numColumns={2}
        renderItem={this.renderItem}
      />
    </View>
    )
  }

Cliquez ici pour voir mon travail

0
Steven Fang

Vous pouvez ajouter un wrapper View autour de votre composant Text et appliquer le style borderRight au composant View, voir l'exemple ici: https://snack.expo.io/HJx68bKvb , essayez d'exécuter dans le Android sur Expo, l'émulateur iOS de l'Expo pour une raison quelconque n'affiche pas correctement la bordure, mais fonctionne sur mon émulateur local.

Vous pouvez jouer avec le rembourrage des composants View et Text pour obtenir la position de bordure souhaitée.

0
dotcomXY

J'ai regardé votre Expo . C'est comme ci-dessous.

 1   2   3   4 
---------------
 5   6   7   8

Je suppose que vous voulez comme ci-dessous.

 1 | 2 | 3 | 4 
---+---+---+---
 5 | 6 | 7 | 8

Pour ce faire, ce n'est pas possible avec ItemSeparatorComponent uniquement. comme le dit Hazim ALi, utilisez un style différent par index.

renderItem={({ item, index }) => (
        <Text style={[styles.text, index % 4 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'red'}]}>{item}</Text>
    )}

enter image description here

Ceci est l'exemple complet .

-

Mais le séparateur n'apparaît qu'entre les lignes, pas entre les colonnes

Pour autant que j'ai lu le code source , lorsque numColumns> 2, il n'y a pas de séparateur d'article entre les colonnes. Le séparateur d'articles est uniquement entre les lignes et les lignes.

Voici un exemple. Lorsque numColumns est défini sur 4, quatre éléments sont regroupés dans une cellule. Et un élément Séparateur est placé entre les cellules.

 1   2   3   4  <- cell1
--------------- <- itemSeparator
 5   6   7   8  <- cell2
0
noymer