Question

我尝试使用以下代码（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>

但在我的设备Nexus 7 Tab中，android 5页脚不可见。您有什么建议可以找到问题并修复它吗？我使用的是NativeBase 2.0.12和React-Native 0.42.0。

screenshot_2017-03-22-12-00-35

我认为这可能与此问题有关：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>

这是新截图： screenshot_2017-03-22-18-27-22

当我从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>

screenshot_2017-03-22-18-32-42

为什么我们无法在Form内使用CardItem？它是Card组件的无证限制吗？

Answer 1

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

`

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

`

使用NativeBase无法看到卡体中的表单

1 个答案: