web-dev-qa-db-ja.com

React列間のネイティブFlatListセパレーター

複数の列を持つFlatListがあります：

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

行区切り記号：

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

しかし、セパレータは行間でのみ表示され、列間では表示されません（width: 0.5を追加しても

博覧会で見る

cssreact-nativereact-native-flatlist
14
Avery235

renderItems内にif if else条件を追加し、インデックスモジュラスをチェックしてセパレータを追加できます。これを使用するだけで、すべてがうまく機能します。

何かのようなもの ：-

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

これがあなたのお役に立てば幸いです。

11
Hazim Ali

フラットリストコンポーネントのプロパティを使用して列セパレーターを追加する方法も見つけられなかったため、申し訳ありませんが、次のようにレンダーアイテムのテキストコンポーネントの外側にビューを追加しました。

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

これが結果です：

enter image description here

これがあなたの助けになることを願っています:)

1
Syauqi Rahmat Sugara

各アイテムにマージンを提供し、コンテナにマイナスのマージンを提供できます。これは、CSSフレックスレイアウトの非常に一般的なトリックです。

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

私の作品を見るにはここをクリック

0
Steven Fang

Textコンポーネントの周囲にViewラッパーを追加し、borderRightスタイルをViewコンポーネントに適用できます。ここの例を参照してください： https://snack.expo.io/HJx68bKvb 、Androidエミュレーター、ExpoのiOSエミュレーターは何らかの理由で境界線を正しく表示していませんが、ローカルエミュレーターで動作しています。

ViewコンポーネントとTextコンポーネントでパディングを試して、目的の境界線位置を取得できます。

0
dotcomXY

your Expo を見ました。以下の通りです。

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

以下のようにしたいと思います。

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

これを行うには、ItemSeparatorComponentのみでは不可能です。 Hazim ALiが言うように、インデックスごとに異なるスタイルを使用します。

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

enter image description here

これは完全な例です 。

-

ただし、セパレータは行間でのみ表示され、列間では表示されません

ソースコード を読む限り、numColumns> 2の場合、列間にitemseparatorはありません。 Itemseparatorは、行と行の間のみです。

以下に例を示します。 numColumnsが4に設定されると、4つのアイテムが1つのセルにグループ化されます。そして、1つのitemSeparatorがセルの間に配置されます。

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