Использование flex: 1 приводит к тому, что карты складываются, без показа списка flex, но без прокрутки

Question

Я пытаюсь получить список карт для отображения по вертикали.В настоящее время только с картой и некоторыми другими стилями все отображается правильно

Однако прокрутка не работает.

Чтение дальше, по-видимому, мне нужноустановите представление, которое оборачивает все и установите flex на 1. Но когда я делаю это, кажется, что карты могут накладываться друг на друга

Нижемой код CardDetails.js с CardFlip, который оборачивает все и flex установлен в 1. Если я закомментирую flex 1, я получаю первый скриншот.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';


const styles = StyleSheet.create({
  cardFlip: {
    flex: 1,
    alignItems: 'center',
},
  cardStyle: {
    //flex: 1,
    height: 150,
    width: 350,
    marginBottom: 10,
    marginTop: 10,
    padding: 5,
    backgroundColor: '#FFF',
    borderRadius: 3,
    elevation: 2,
    shadowColor: '#000000',
    shadowOpacity: 0.3,
    shadowRadius: 1,
    shadowOffset: {
      height: 1,
      width: 0.3,
    }
},
  topContainerStyle: {
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    // borderWidth: 0.5,
    borderColor: 'green',
  },
  containerStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 2,
    // borderWidth: 0.5,
    // borderTopColor: 'red',
  },
  viewStyle: {
    alignItems: 'center',
    borderColor: 'red',
  },
  dayStyle: {
    color: 'red',
    fontSize: 14,
    fontWeight: 'bold',
  },
  headerStyle: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  masjidStyle: {
    alignItems: 'center',
    paddingBottom: 15,
    paddingTop: 5
  },
  masjidFontStyle: {
    color: 'blue',
    fontSize: 15,
    fontWeight: 'bold',

  },
  dateFontStyle: {
      fontSize: 20
  }
});

const CardDetails = (props) => {
  const {
    topContainerStyle,
    cardFlip,
    cardStyle,
    masjidFontStyle,
    containerStyle,
    masjidStyle,
    viewStyle,
    dayStyle,
    dateFontStyle
  } = styles;
  return (
    <View style={cardFlip}>
    <View style={cardStyle}>
      <View style={masjidStyle}>
        <Text style={dateFontStyle}> {props.date1}</Text>
      </View>
      <View style={containerStyle}>
        <View style={viewStyle}>
        <Text style={dayStyle}> Doctor: </Text>
        <Text> {props.doc1} </Text>

        </View>
        <View style={viewStyle}>
        <Text style={masjidFontStyle}> Nurse: </Text>
        <Text> {props.nur1} </Text>
        </View>
        <View style={viewStyle}>
          <Text style={dayStyle}> Volunteers: </Text>
          <Text> {props.vol1} </Text>
          <Text> {props.vol2} </Text>
        </View>
      </View>
    </View>
    </View>
  );
};


export default CardDetails;

Answer 1

<View> отображать содержимое только до максимальной высоты, доступной без прокрутки.

Для включения прокрутки необходимо использовать либо <ScrollView>, либо <FlatList>

Документы .