×
首页程序员正文

我尝试使用下面的代码(Card 组件内的 Form)

<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: 我稍微更改了代码，并为未出现的 CardItem 添加了 style={{backgroundColor: 'red'}} ，并在外部卡片组件上找到了它。这是我的新代码:

<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

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

<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

为什么我们不能在CardItem中使用Form？这是 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>

`


评论关闭
IT虾米网
IT虾米网 Android

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！