React Native 让孩子们均匀地填充空白区域

Question

我有一个容器，里面嵌套了一个

scrollview

组件，它也是一个容器。在滚动视图容器内，我循环遍历数据，然后尝试使子项成为每行 2 个项目，并自动填充任何剩余的空白空间，但是，它只会填充父容器的一半。

我希望图像中显示的 6 个盒子能够均匀分布高度并填充容器中的剩余空间。

// React Native Element

  return (
    <SafeAreaView style={[{ flex: 1 }]}>
      <ScrollView
        contentContainerStyle={surveyScreenStyles().cardsContainer}
      >
        <View
          style={[surveyScreenStyles().cardsContainer]}
        >
          {surveyData?.surveys?.map((surveyDetails, i) => (
            <Card
              key={`suvey-card-${i}`}
              mode='elevated'
              style={[surveyScreenStyles().cards]}
            >
              <Card.Title
                title={surveyDetails.name}
                titleVariant='titleLarge'
                subtitle={surveyDetails.summary}
                subtitleNumberOfLines={2}
              />
            </Card>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

// css file
{
    cardsContainer: {
      backgroundColor: "#FFFFFF",
      justifyContent: 'space-evenly',
      flex: 1,
      flexWrap: 'wrap',
      flexDirection: 'row',
      padding: 5,
      gap: 10
    },
    cards: {
      backgroundColor: "#FFFFFF",
      borderRadius: 10,
      flexBasis: '45%',
      justifyContent: 'center',
      padding: 10,
    }
}

Answer 1

看起来 flexWrap 可能是造成这种情况的原因。我认为是因为滚动视图无法正常工作。

这是一个看起来不像你的那么干净的解决方案，但具有所需的结果：

    <ScrollView
      contentContainerStyle={{
        flex: 1,
        flexDirection: 'column',
        padding: 5,
        gap: 10,
      }}
    >
      <View style={{ flex: 1, flexDirection: 'row', gap: 10 }}>
        <View
          style={{
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            justifyContent: 'center',
            padding: 10,
            flex: 1,
          }}
        ></View>
        <View
          style={{
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            justifyContent: 'center',
            padding: 10,
            flex: 1,
          }}
        ></View>
      </View>
      <View style={{ flex: 1, flexDirection: 'row', gap: 10 }}>
        <View
          style={{
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            justifyContent: 'center',
            padding: 10,
            flex: 1,
          }}
        ></View>
        <View
          style={{
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            justifyContent: 'center',
            padding: 10,
            flex: 1,
          }}
        ></View>
      </View>
      <View style={{ flex: 1, flexDirection: 'row', gap: 10 }}>
        <View
          style={{
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            justifyContent: 'center',
            padding: 10,
            flex: 1,
          }}
        ></View>
        <View
          style={{
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            justifyContent: 'center',
            padding: 10,
            flex: 1,
          }}
        ></View>
      </View>
    </ScrollView>

Answer 2

如果您使用平面列表，则可以使用

numColumns

属性和

columnWrapperStyle

属性来获取具有所需间距样式的 2 列。然后，要让项目占据剩余高度，您可以使用

onLayout

属性来获取高度，然后除以 3，因为每行有 2 个项目：

import {
  View,
  StyleSheet,
  ScrollView,
  SafeAreaView,
  FlatList,
  Image,
} from 'react-native';
import { Text, Card } from 'react-native-paper';
import { useState } from 'react';
import ResizeableView from './ResizeableView';
import useData from '../hooks/useData';

const numColumns = 2;
const gap = 10;

export default function AssetExample() {
  const [surveyData] = useData();
  const [flatlistHeight, setFlatlistHeight] = useState(0);
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* draggable component to demonstrate responsiveness */}
      <ResizeableView />
      <FlatList
        style={{ flex: 1 }}
        data={surveyData?.surveys}
        contentContainerStyle={styles.cardsContainer}
        renderItem={({ item: surveyDetails, index: i }) => {
          const height = flatlistHeight / (6 / numColumns) - gap
          return (
            <Card
              mode="elevated"
              style={[
                styles.cards,
                { height },
              ]}>
              <Card.Content>
                <Card.Title
                  title={surveyDetails.name}
                  titleVariant="titleLarge"
                  subtitle={surveyDetails.summary}
                  subtitleNumberOfLines={2}
                />
                <Image
                  source={{ uri: surveyDetails.thumbnail }}
                  style={{ width: height*.5,height:height*.5 }}
                />
              </Card.Content>
            </Card>
          );
        }}
        keyExtractor={(item, i) => `suvey-card-${i}`}
        onLayout={({ nativeEvent }) =>
          setFlatlistHeight(nativeEvent.layout.height)
        }
        numColumns={numColumns}
        columnWrapperStyle={{ justifyContent: 'space-evenly' }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  cardsContainer: {
    flexGrow: 1,
    padding: 5,
    gap,
  },
  cards: {
    backgroundColor: '#FFFFFF',
    borderRadius: 10,
    flexBasis: '45%',
    justifyContent: 'center',
    // borderWidth: 1,
  },
});

演示