19

我尝试使用下面的代码（组件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 不可见。您对找到问题并解决问题有什么建议吗？我正在使用 NativeBase2.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

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

4

1 回答 1

1

您的卡片组件默认具有 flex direction 列属性，将其更改为 row 以便表单可以在您的第一张卡片下方对您可见。

`

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

`

于 2019-12-01T08:11:08.877 回答