Android 卡体中的表单在NativeBase中不可见_Android_Reactjs_React Native_React Native Android_Native Base

Android 卡体中的表单在NativeBase中不可见

android reactjs react-native

Android 卡体中的表单在NativeBase中不可见,android,reactjs,react-native,react-native-android,native-base,Android,Reactjs,React Native,React Native Android,Native Base,我尝试使用下面的代码（一个表单在卡片组件中）这是新的截图：当我从CardItem中删除Form组件时，它会成功渲染，如下所示： <Card> <CardItem header style={{ backgroundColor: 'lightgray' }}> <Right> <Text>This is Right align text </Text> </Right> <Bad

我尝试使用下面的代码（一个

表单

在

卡片

组件中）

这是新的截图：

当我从

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>


这是右对齐文本
第一步
{this.state.error}

为什么我们不能在

CardItem

中使用

Form

？这是否是

卡组件的未记录限制？
默认情况下，您的卡组件具有flex direction列属性，请将其更改为row，以便您可以在第一张卡下方看到表单
`

这是右对齐文本
第一步
{this.state.error}
编号：
日期：
第二点：
日期2：
提交

`
用react native的视图
替换卡
<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>

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

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