在 React Native 平面列表中以 100% 高度和弹性粉碎视图

Question

我在尝试使用 100% 高度的 Flex 显示视图列表时遇到问题，当它从平面列表渲染列表时出现问题，我可能会用 Flex 做一些错误的事情。

这就是我想要的：滚动时具有相同高度的平面列表我将转到另一个组件

这就是我所拥有的所有渲染视图的粉碎列表

flatList 就是这样：

  <FlatList
      pagingEnabled={true}
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />

我正在渲染的视图中的容器看起来像这样（css）

 container: {
    alignItems: 'center',
    // TODO: check how why the screen is forguetting the tab, thats why I put the height like that
    width: '100%',
    height: '100%',
    justifyContent: 'space-around',
    flex: 1,
  },

Answer 1

使用onLayout获取父容器的高度并使用它来设置FlatList项目的高度：

示例输出：

完整源代码：

//import { List, ListItem } from 'react-native-elements';
import React, { useState } from 'react';
import {
  Text,
  View,
  FlatList,
  StyleSheet,
  SafeAreaView,
  StatusBar,
} from 'react-native';

const attendants = [
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '10/11/2020',
    no: 1,
  },
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '09/11/2020',
    no: 2,
  },
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '10/11/2020',
    no: 3,
  },
];

const App = () => {
  const [data, setData] = useState(attendants);
  const [layoutHeight, setHeight] = useState(100);

  return (
    <View style={styles.container}>
      <View style={{ flex: 5 }}>
        <FlatList
          onLayout={(e) => {
            setHeight(e.nativeEvent.layout.height);
            console.log(e.nativeEvent.layout.height);
          }}
          style={{ flexGrow: 1, backgroundColor: 'pink', height: layoutHeight }}
          data={data}
          keyExtractor={(item) => item.no}
          renderItem={({ item }) => (
            <View
              style={{
                height: layoutHeight
                  
              }}>
              <ListItem
                customStyle={{ backgroundColor: 'black' }}
                title={`${item.lecturer} ${item.courseName}`}
                subtitle={item.students}
              />
            </View>
          )}
        />
      </View>
      <View
        style={{
          flex: 1,
          backgroundColor: 'lightgreen',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={[styles.subtitle, { fontSize: 20 }]}>Bottom Bar</Text>
      </View>
    </View>
  );
};

const ListItem = ({ title, subtitle, customStyle }) => {
  return (
    <View style={styles.listContainer}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    flex: 1,
  },
  listContainer: {
    flex: 1,
    backgroundColor: 'teal',
    margin: 5,
    paddingHorizontal: 5,
    borderRadius: 4,
  },
  subtitle: { fontSize: 12, color: 'rgba(0,0,10,0.5)' },
  title: {
    fontSize: 14,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'cetere',
  },
});

export default App;

您可以在这里找到工作应用程序示例：Expo Snack