我是React Native的新手，现在已经挣扎了几天，在旋转设备然后将其旋转回原位后，我的布局溢出了容器。似乎发生的是，当我将设备从水平方向旋转到垂直方向时，体内的文本占据了更高的高度。当旋转回水平位置时，其高度似乎贴在身体上，而不是像应该调整的那样调整大小。我正在Android Studio中对其进行测试。我尝试了两个具有相同结果的不同模拟器。

这是我第一次加载页面时的样子：

我将其垂直旋转并得到：

当我将其旋转回去时，得到以下信息。请注意，第一个框中缺少开始按钮。

这是我的代码：

        <ScrollView style={SiteStyle.mainContent} contentContainerStyle={SiteStyle.mainContentContainer}>
      <View style={SiteStyle.cardGroup}>
      <View style={SiteStyle.homeCardContainer}>
          <Card 
            title={
              <View style={SiteStyle.homeCardHeader}>
                <View style={{flexDirection: 'row',flexWrap: 'wrap'}}>
                  <PSIcon color='#fff' name='currency-scale' size={24} style={{marginRight: 10}}/><Text style={SiteStyle.homeCardTitle}>Topic 1</Text>
                </View>
              </View>}
            containerStyle={SiteStyle.homeCard}>
            <View style={SiteStyle.homeCardBody}>
              <Text style={SiteStyle.homeCardBodyText}>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged.
              </Text>
            </View>
            <View style={SiteStyle.homeCardFooter}>
              <TouchableOpacity onPress={() => navigate('Pricing',{})}>
                <Text style={SiteStyle.homeCardFooterText}>
                  START <PSIcon name='controls-chevron-right'/>
                </Text>
              </TouchableOpacity>
            </View>
          </Card>
        </View>
        <View style={SiteStyle.homeCardContainer}>
          <Card title={
            <View style={SiteStyle.homeCardHeader}>
              <View style={{flexDirection: 'row',flexWrap: 'wrap'}}>
                <PSIcon color='#fff' name='chart-chart' size={24} style={{marginRight: 10}} /><Text style={SiteStyle.homeCardTitle}>Topic 2</Text>
              </View>  
            </View>} containerStyle={SiteStyle.homeCard}>
            <View style={SiteStyle.homeCardBody}>
              <Text style={SiteStyle.homeCardBodyText}>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              </Text>
            </View>
            <View style={SiteStyle.homeCardFooter}>
              <TouchableOpacity onPress={() => navigate('TrendsAndAnalytics',{})}>
                <Text style={SiteStyle.homeCardFooterText}>
                  START  <PSIcon name='controls-chevron-right'/>
                </Text>
              </TouchableOpacity>
            </View>
          </Card>
        </View>
        <View style={SiteStyle.homeCardContainer}>
          <Card title={
            <View style={SiteStyle.homeCardHeader}>
              <View style={{flexDirection: 'row',flexWrap: 'wrap'}}>
                <PSIcon color='#fff' name='currency-scale' size={24} style={{marginRight: 10}}/><Text style={SiteStyle.homeCardTitle}>Topic 3</Text>
              </View>
            </View>} containerStyle={SiteStyle.homeCard}>
            <View style={SiteStyle.homeCardBody}>
              <Text style={SiteStyle.homeCardBodyText}>
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
              </Text>
            </View>
            <View style={SiteStyle.homeCardFooter}>
              <TouchableOpacity onPress={() => navigate('MacroEconomics',{})}>
                <Text style={SiteStyle.homeCardFooterText}>
                  START <PSIcon name='controls-chevron-right' />
                </Text>
              </TouchableOpacity>
            </View>
          </Card>
        </View>    
      </View> 
    </ScrollView>

这些是相关的样式：

    mainContentContainer: {
    paddingTop: 25,alignItems: 'flex-start',backgroundColor: "red"
  },cardGroup: {
    flexDirection: 'row',flex: -1
  },homeCardContainer: {
    flex: 1,backgroundColor: 'blue',flexDirection: 'column',},homeCard: {
    flex: 1,padding: 0,marginTop: 0,marginHorizontal: 10,flexDirection: 'row',backgroundColor: 'green',height: '100%'
  },homeCardHeader: {
    backgroundColor: '#e0ab24',flex: -1,flexBasis: 55,height: 55,justifyContent: 'center',paddingLeft: 20,paddingTop: 0
  },homeCardTitle: {
    color: '#ffffff',fontSize: 22,marginLeft: 0,paddingRight: 0,textAlign: 'left'
  },homeCardBody: {
    flexDirection: 'column',flex: 1,paddingLeft: 25,paddingRight: 25,paddingTop: 25,paddingBottom: 25,backgroundColor: 'yellow'
  },homeCardBodyText: {
    fontSize: 16,backgroundColor: 'pink'
  },homeCardFooter: {
    flex: 0,flexBasis: 44,height: 44,borderTopColor: '#d3d3d3',borderTopWidth: 1,backgroundColor: 'gray',homeCardFooterText: {
    paddingLeft: 25,color: '#ebad49',fontSize: 18
  },