Reagieren Nativen FlatList Trennzeichen zwischen den Spalten

Ich habe eine FlatList mit mehreren Spalten:

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

Sowie eine line-separator:

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

Aber die Trennzeichen erscheinen nur zwischen den Zeilen, nicht zwischen den Spalten (auch wenn ich hinzufügen width: 0.5

Blick auf die expo

InformationsquelleAutor Avery235 | 2017-08-09

11

können Sie nur hinzufügen, wenn die else-Bedingung innerhalb renderItems und überprüfen Sie das index-Modul hinzufügen Trennzeichen.. ich benutze nur diese und alles funktioniert Super.

etwas wie :-

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

InformationsquelleAutor Hazim Ali

Sorry ich habe auch nicht einen Weg finden, um eine Spalte hinzuzufügen separator mit Eigenschaften in der flatlist Komponente, so habe ich soeben die Ansicht außerhalb des text-Komponente in der render-Element wie diesem :

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'
 },
});

und das ist das Ergebnis :

Reagieren Nativen FlatList Trennzeichen zwischen den Spalten

Ich hoffe das kann dir helfen 🙂

Dies schaffen würde, die Grenze um den oberen, unteren, linken und rechten Grenzen, anstatt nur zwischen den Elementen.
Ich Stimme mit @Avery235 - Dies ist nicht der richtige Ansatz.

InformationsquelleAutor Syauqi Rahmat Sugara

0

Können Sie eine Ansicht hinzufügen wrapper um Ihren Text-Komponente und gelten borderRight Stil der View-Komponente, siehe Beispiel hier: https://snack.expo.io/HJx68bKvb, versuchen Sie, führen Sie in der Android-emulator, der auf der Expo, die Expo-iOS-emulator für einige Grund ist, zeigten nicht die Grenze korrekt, aber funktioniert auf meinem lokalen emulator.

Können Sie spielen, um mit Polsterung auf der View-Komponente und die Text-Komponente, um die gewünschte Grenze position.
- So schaffen Sie den rechten Rand am Ende jeder Zeile, wie gut.
- Aktualisiert meine Antwort auf den rechten Rand am Ende jeder Zeile Ausgabe.
InformationsquelleAutor dotcomXY
0

Sah ich Ihre Expo. Es ist, als unten.
```
 1   2   3   4 
---------------
 5   6   7   8 
```
Ich nehme an, Sie möchten, wie unten beschrieben.
```
 1 | 2 | 3 | 4 
---+---+---+---
 5 | 6 | 7 | 8 
```
Um dies zu tun, Es ist nicht möglich, mit ItemSeparatorComponent nur.
als Hazim Ali sagt, verwenden verschiedene Stil pro index.
```
renderItem={({ item, index }) => (
        <Text style={[styles.text, index % 4 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'red'}]}>{item}</Text>
    )}
```
Dies ist das vollständige Beispiel.

--

Aber die Trennzeichen erscheinen nur zwischen den Zeilen, nicht zwischen den Spalten

Soweit ich Lesen Sie die source code,
wenn numColumns > 2, es gibt keine itemseparator zwischen den Spalten.
Itemseparator ist nur zwischen Zeile und Zeile.

Hier ist Beispiel.
Wenn numColumns eingestellt ist 4, vier Elemente, die gruppiert sind, um eine Zelle.
Und eine itemSeparator ist zwischen den Zellen.
```
 1   2   3   4  <- cell1
--------------- <- itemSeparator
 5   6   7   8  <- cell2
```
InformationsquelleAutor noymer

Können Sie eine Marge für jedes Element, und eine negative Marge für den container. Dies ist ein sehr verbreiteter trick, um CSS-flex-layout.

  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>
    )
  }

Klicken Sie hier, um zu sehen, meine Arbeit

InformationsquelleAutor Steven Fang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.