web-dev-qa-db-ja.com

反応ネイティブで間にスペースを持つ2つの列を作成する方法-フラットリスト

こんにちは、React Nativeの新人です。

FlatListと呼ばれるreactネイティブコンポーネントを使用して、スペースbeetweenで2列のレイアウトを作成しようとしています。

これが私のビューコードです：

<View style={styles.container}>
        <FlatList
            data={db}
            keyExtractor={ (item, index) => item.id }
            numColumns={2}
            renderItem={
                ({item}) => (
                    <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                        <View style={styles.listItem}>
                            <Text style={styles.title}>{item.name}</Text>
                            <Image
                                style={styles.image}
                                source={{uri: item.image}}
                            />
                            <Text style={styles.price}>{item.price} zł</Text>
                        </View>
                    </TouchableWithoutFeedback>
                )
            }
        />
    </View>

ここにスタイルがあります：

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    marginBottom: 40
},
listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
},

結果は2列ですが、間にスペースはありません。この問題の解決にご協力いただけますか？

javascriptandroidreactjsmobilereact-native
7
user1559599

次のように、styles.containerをFlatlistのcontentContainerStyleプロパティに渡す必要があります。

<FlatList
        data={db}
        keyExtractor={ (item, index) => item.id }
        contentContainerStyle={styles.container}
        numColumns={2}
        renderItem={
            ({item}) => (
                <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                    <View style={styles.listItem}>
                        <Text style={styles.title}>{item.name}</Text>
                        <Image
                            style={styles.image}
                            source={{uri: item.image}}
                        />
                        <Text style={styles.price}>{item.price} zł</Text>
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    />
7
Komeyl94

リスト項目のスタイルにマージンを追加するだけです。

listItem: {
  margin: 10,
}
3
Peyotle

ItemSeparatorComponent を使用して、アイテム間のコンポーネントをレンダリングします

ドキュメント：各アイテムの間にレンダリングされますが、上部または下部にはレンダリングされません。

    <FlatList
        data={arrayOfData}
        horizontal
        ItemSeparatorComponent={
            () => <View style={{ width: 16, backgroundColor: 'pink' }}/>
        }
        renderItem={({ item }) => (
            <ItemView product={item} />
        )}
    />

水平リストのプレビューenter image description here

リストが縦型で、columnCountが2である場合

enter image description here

2
Nicolas Sturm

例に基づいて、marginをリストアイテムのスタイルに追加できるように見えます。

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    margin: 18,
},

これは次のことと同じであることを覚えておいてください：

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    marginTop: 18,
    marginBottom: 18,
    marginRight: 18,
    marginLeft: 18,
},

あなたの好みや仕様に合わせてカスタマイズしてください:)

0
TechnoTim

このライブラリは使用していませんが、padding: 10 to listItemスタイルが役立つはずです。

0
Saleel