React Native逻辑＆amp;＆amp;条件渲染破坏了我的布局

Question

当我添加'report.sleep.bed.sensor.inst＆amp;＆amp;'时这是假的，它会弄乱卡片的宽度

但是当'report.sleep.bed.sensor.inst'为真时，它会恢复正常

除了我的目标是在'report.sleep.bed.sensor.inst'为假时不显示卡片项目。我在做条件渲染时错了吗？

return (
  <View style={styles.container}>
    <Card style={styles.card}>
      <ImageBackground source={Images.historyCardBg} style={styles.cardBg} imageStyle={styles.cardBg} >
        <CardItem style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
          <Text h1>{fromNow === 1 ? I18n.t('$date_yesterday') : fromNow + ' ' + I18n.t('$reports_history_daysago')}</Text>
          <Text h2 purple>{date}</Text>
        </CardItem>
        {
          report.sleep.bed.sensor.inst &&
           <CardItem>
             <Col><Text>{I18n.t('$reports_history_sleepinbed')}</Text></Col>
             <Col style={styles.historyDataRight}><Text>{ moment.duration(report.sleep.bed.duration, 'milliseconds').hours() + ' hrs ' + moment.duration(report.sleep.bed.duration, 'milliseconds').minutes() + ' mins' }</Text></Col>
          </CardItem>
        }
        <CardItem>
          <Col><Text>{I18n.t('$reports_history_awayfromhome')}</Text></Col>
          <Col style={styles.historyDataRight}><Text>{report.outside.sensor.inst ? moment.duration(report.outside.duration, 'milliseconds').hours() + ' hrs ' + moment.duration(report.outside.duration, 'milliseconds').minutes() + ' mins' : 'N/A'}</Text></Col>
        </CardItem>
      </ImageBackground>
    </Card>
  </View>
)

这就是css：

  card: {
    backgroundColor: 'transparent',
    borderColor: 'transparent'
  },

  cardBg: {
    flex: 1,
    width: null,
    height: null,
    borderRadius: Metrics.cardBorderRadius,
    padding: Metrics.cardPadding
  },