使用NativeBase无法看到卡体中的表单
b24*_*b24 13 android reactjs react-native react-native-android native-base
我尝试使用下面的代码(组件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>
但在我的设备Nexus 7 Tab与android 5页脚不可见.您有什么建议可以找到问题并修复它吗？我正在使用NativeBase 2.0.12和React-Native 0.42.0.
我想这可能与这个问题有关: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>
这是新截图:
当我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>
为什么我们不能Form在里面使用CardItem？它是Card组件的无证限制吗？
小智 1
默认情况下，您的卡片组件具有弯曲方向列属性，将其更改为行，以便您可以在第一张卡片下方看到该表单。
`
<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>
`
| 归档时间： |
|
| 查看次数： |
1133 次 |
| 最近记录： |