Блог

У меня возникли проблемы при попытке отобразить список представлений с использованием flex с высотой 100%, проблема возникает, когда он отображает список из плоского списка, я могу сделать что-то не так с flex.

Это то, что я хочу: плоский список с одинаковой высотой при прокрутке я перейду к другому компоненту

И это то, что у меня есть разбитый список всех отображаемых представлений

Плоский список — это просто :

   <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,
  },
 

Используйте 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

Flatlist — это scrollview со многими элементами внутри, а содержимое ScrollView будет вычислять высоту дочерних элементов, отображаемых на нем. Таким образом, для любого элемента, отображаемого на нем, требуется установленная высота. высота 100% получит высоту родительского элемента и будет установлена для себя, поэтому вы не можете использовать высоту содержимого scrollview (бесконечность) и установить для элемента внутри.