在 FlatList 中取 100% 宽度 - React Native答案

【问题标题】：Take 100% width in FlatList - React Native在 FlatList 中取 100% 宽度 - React Native
【发布时间】：2021-03-03 04:12:11
【问题描述】：

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

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

我将 react-native-paper 用于 Card 组件并在 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,
  },
});

【问题讨论】：

你想让 Flatlist 的每个 Card 元素占据父容器的整个高度吗？
我的意思是整个宽度
已发布答案，请查看。

标签： reactjs react-native react-native-flatlist

【解决方案1】：

使用onLayout props 获取父组件的宽度并将该宽度用于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',
  },
});

【讨论】：

现在卡的flex设置为1时可以正常工作
您可能在web 选项卡上查看结果，请在android 或iPhone 选项卡上查看结果。
为什么这在 web 和 android 中的工作方式不同？它不应该以同样的方式表现吗
也许只有安卓和iPhone设备支持确定屏幕尺寸的底层逻辑，浏览器不支持。他们可能会在不久的将来对其进行更改，但目前它不适用于网络。

【解决方案2】：

设置 numColumns={1} 而不是 2

【讨论】：