使用 NativeBase 看不到卡体中的表格
Posted
技术标签:
【中文标题】使用 NativeBase 看不到卡体中的表格【英文标题】：Form in card body not visible with NativeBase 【发布时间】：2017-08-14 17:48:39 【问题描述】：我尝试使用以下代码（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>
但在我的设备中，带有 android 5 页脚的 Nexus 7 Tab 不可见。
您对找到问题并解决问题有什么建议吗？
我正在使用 NativeBase 2.0.12 和 React-Native 0.42.0。
我认为可能与这个问题有关：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>
这是新的截图：
当我从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>
为什么我们不能在CardItem 中使用Form？它是Card 组件的未记录限制吗？
【问题讨论】：
将Card 替换为 react-native 中的 View
【参考方案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>
`
【讨论】：
以上是关于使用 NativeBase 看不到卡体中的表格的主要内容，如果未能解决你的问题，请参考以下文章