android - 卡体中的表单在NativeBase中不可见

我尝试使用以下代码（在Form组件内的Card）

<Card>
   <CardItem header style={{ backgroundColor: 'lightgray' }}>
   <Right>
      <Text>This is Right align text </Text>
   </Right>
   <Badge primary>
      <Text>step 1</Text>
   </Badge>
   </CardItem>
   <CardItem>
      <Body>
         <Text style={{color: 'red'}}>{this.state.error}</Text>
         <Form style={{alignSelf: 'stretch'}}>
         <Item>
            <Label>number:</Label>
            <Input keyboardType="numeric"/>
         </Item>
         <Item>
            <Label>date:</Label>
            <Input />
         </Item>
         <Item>
            <Label>number 2:</Label>
            <Input keyboardType="numeric"/>
         </Item>
         <Item>
            <Label>date 2:</Label>
            <Input />
         </Item>
         <Button success block
            >
            <Text>submit</Text>
            <Icon name='check' size={20} color="#FFFFFF"/>
         </Button>
         </Form>
      </Body>
   </CardItem>
</Card>

但是在我的设备上，带有android 5页脚的Nexus 7 Tab无法显示。
您是否有任何发现问题的建议并加以解决？
我正在使用NativeBase 2.0.12和React-Native 0.42.0。

我认为这可能与以下问题有关：https://github.com/GeekyAnts/NativeBase/issues/668

尝试1：
我稍稍更改了代码，并为未出现的style={{backgroundColor: 'red'}}添加了CardItem并在外卡组件上找到了它。这是我的新代码：

<Card>
   <CardItem header style={{ backgroundColor: 'lightgray' }}>
   <Right>
      <Text>This is Right align text </Text>
   </Right>
   <Badge primary>
      <Text>step 1</Text>
   </Badge>
   </CardItem>
   <CardItem style={{backgroundColor: 'red'}}>
   <Body>
      <Text style={{color: 'red'}}>{this.state.error}</Text>
      <Form style={{alignSelf: 'stretch'}}>
      <Item>
         <Label>number:</Label>
         <Input keyboardType="numeric"/>
      </Item>
      <Item>
         <Label>date:</Label>
         <Input />
      </Item>
      <Item>
         <Label>number 2:</Label>
         <Input keyboardType="numeric"/>
      </Item>
      <Item>
         <Label>date 2:</Label>
         <Input />
      </Item>
      <Button success block
         >
         <Text>submit</Text>
         <Icon name='check' size={20} color="#FFFFFF"/>
      </Button>
      </Form>
   </Body>
   </CardItem>
</Card>

这是新的屏幕截图：

当我从Form删除CardItem组件时，它成功呈现，如下所示：

<Card>
   <CardItem header style={{ backgroundColor: 'lightgray' }}>
   <Right>
      <Text>This is Right align text </Text>
   </Right>
   <Badge primary>
      <Text>step 1</Text>
   </Badge>
   </CardItem>
   <CardItem style={{backgroundColor: 'red'}}>
   <Body>
      <Text style={{color: 'red'}}>{this.state.error}</Text>
   </Body>
   </CardItem>
</Card>

为什么我们不能在Form中使用CardItem？是Card组件的未记录限制吗？

最佳答案

默认情况下，您的“卡片组件”具有“伸缩方向”列属性，请将其更改为“行”，以便您在第一张卡片下方可以看到该表单。

`

<Card style={{ flexDirection: 'row' }}>
    <CardItem header style={{ backgroundColor: 'lightgray' }}>
        <Right>
            <Text>This is Right align text </Text>
        </Right>
        <Badge primary>
            <Text>step 1</Text>
        </Badge>
    </CardItem>
    <CardItem style={{ backgroundColor: 'red' }}>
        <Body>
            <Text style={{ color: 'red' }}>{this.state.error}</Text>
            <Form style={{ alignSelf: 'stretch' }}>
                <Item>
                    <Label>number:</Label>
                    <Input keyboardType="numeric" />
                </Item>
                <Item>
                    <Label>date:</Label>
                    <Input />
                </Item>
                <Item>
                    <Label>number 2:</Label>
                    <Input keyboardType="numeric" />
                </Item>
                <Item>
                    <Label>date 2:</Label>
                    <Input />
                </Item>
                <Button success block
                >
                    <Text>submit</Text>
                    <Icon name='check' size={20} color="#FFFFFF" />
                </Button>
            </Form>
        </Body>
    </CardItem>
</Card>