使用flex：1导致卡堆叠，没有flex显示列表但没有滚动

Question

Im trying to have a list of cards to display in vertical. Currently with just a card and some other styling everything displays properly

However scrolling doesnt work.

Reading further apparently I have to set a view that wraps everything and set the flex to 1. But when I do that it seems the cards might be stacking on each other

Below is my CardDetails.js code with the CardFlip that wraps everything and flex set to 1. If I comment out the flex 1 I get the first screenshot.

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> display the content only till maximum height available without scrolls.

To enable scrolling you need to use either <ScrollView> ,or <FlatList>

Docs .