在 FlatList 中取 100% 宽度 - React Native

Question

我有一个名为“AddWater”的组件，我想在其中显示一个包含两列的 FlatList。一切正常，但 FlatList 中的组件没有占用整个 space。帮我解决这个问题。

我希望两个组件占 100% 宽度，这意味着一个组件占 50% space。

我正在为 Card 组件使用 react-native-paper 并在 expo web 中测试它

检查下面的代码。

export default function AddWater() {
  return (
    <View style={styles.container}>
      <FlatList
        numColumns={2}
        data={sizes}
        renderItem={({item}) => (
          <Card style={styles.card}>
            <Card.Content>
              <Title>{item.size}</Title>
            </Card.Content>
          </Card>)
        }>

      </FlatList>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  card: {
    flex: 1,
  },
});

Answer 1

使用 onLayout 属性获取父组件的宽度并将该宽度用于 Card 元素。

这是完整的工作示例：Expo Snack

import React, { useState } from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card, Title } from 'react-native-paper';

const data = ['one', 'two', 'three', 'four'];
export default function App() {
  const [layout, setLayout] = useState({
    width: 0,
    height: 0,
  });
  return (
    <View
      style={styles.container}
      onLayout={(event) => setLayout(event.nativeEvent.layout)}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Card
            style={{
              width: layout.width,
              backgroundColor: 'pink',
              marginTop: 20,
            }}>
            <Card.Content>
              <Title>{item}</Title>
            </Card.Content>
          </Card>
        )}></FlatList>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 22,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

Answer 2

设置 numColumns={1} 而不是 2

在 FlatList 中取 100% 宽度 - React Native

Take 100% width in FlatList - React Native

reactjs

react-native

react-native-flatlist