Android React本机flex视图在设备旋转后不会收缩

我对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>

---

您的

homeCardFooter

样式上有

flex:0，

，这可能是导致此问题的原因。从文档中可以看出：“当flex为0时，组件的大小取决于宽度和高度，它是不灵活的。”我会给

homeCardFooter

一个100%的宽度，或者给它一个大于零的flex值。试着给它

flex:.3

，看看这是否能防止你的开始按钮被隐藏/高度为零

您的

homeCardFooter

样式上有

flex:0，

，这可能是导致此问题的原因。从文档中可以看出：“当flex为0时，组件的大小取决于宽度和高度，它是不灵活的。”我会给

homeCardFooter

一个100%的宽度，或者给它一个大于零的flex值。试着给它

flex:.3

，看看这是否能防止你的开始按钮被隐藏/高度为零

对于任何感兴趣的人，我都找到了解决方案。在我想根据内容调整大小的容器（homeCardBody）上，我需要将flex:1更改为flexGrow:1，完全删除独立的单词flex。执行此操作后，部件尺寸正确，并在旋转时保持正确尺寸

对于任何感兴趣的人，我都找到了解决方案。在我想根据内容调整大小的容器（homeCardBody）上，我需要将flex:1更改为flexGrow:1，完全删除独立的单词flex。执行此操作后，部件尺寸正确，并在旋转时保持正确尺寸

谢谢你的回复。这会将页脚设置为30%的高度，但这会导致页脚根据正文文本进行缩放。我在下面找到了解决方案。感谢您的回复。这会将页脚设置为30%的高度，但这会导致页脚根据正文文本进行缩放。我找到了下面的解决方案。这确实有效！在浪费了将近2天之后。谢谢这确实奏效了！在浪费了将近2天之后。谢谢

    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,
    justifyContent: 'center',
    height: 44,
    borderTopColor: '#d3d3d3', 
    borderTopWidth: 1,
    backgroundColor: 'gray',
  }, 
  homeCardFooterText: {
    paddingLeft: 25,
    paddingRight: 25,
    color: '#ebad49',
    fontSize: 18
  },