我尝试使用下面的代码(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。
我认为这可能与这个问题有关: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 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>
`
关于android - NativeBase 中卡体中的表单不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42954610/