React native 反应本机日期选择器相同大小的输入

React native 反应本机日期选择器相同大小的输入,react-native,native-base,React Native,Native Base,如何使日期选择器的项目行与输入的大小相同 ... import { Container, Header, Content, Card, Input, CardItem, Text, Right, Icon, Footer, FooterTab, Left, Body, Title, Button, Item } from 'native-base'; import DatePicker from 'react-native-datepicker'; ... <CardItem

如何使日期选择器的项目行与输入的大小相同

...
import {
  Container, Header, Content, Card, Input,
  CardItem, Text, Right, Icon, Footer, FooterTab,
  Left, Body, Title, Button, Item }
from 'native-base';
import DatePicker from 'react-native-datepicker';
...

<CardItem cardBody>
    <Left>
        <FontAwesome name="money" />
        <Text>Rent Amount</Text>
    </Left>
    <Right>
        <Item>
            <Input
               value={RentalAmount}
               onChangeText={(text) => this.onChangeNumberFormat(text, 'RentalAmount')}
               style={styles.valueText}
             />
        </Item>
    </Right>
</CardItem>
<CardItem cardBody>
    <Left>
        <FontAwesome name="calendar" />
        <Text>Lease Start Date</Text>
    </Left>
    <Right>
        <Item>
            <DatePicker
               date={LeaseStartDate}
               mode="date"
               placeholder="select date"
               format="MM/DD/YYYY"
               confirmBtnText="Confirm"
               cancelBtnText="Cancel"
               onDateChange={(text) => this.onChangeText(text, 'LeaseStartDate')}
                      customStyles={{
                        dateInput: {
                          borderWidth: 0,
                          alignItems: 'flex-start'
                        },
                        dateText: {
                          color: '#C0C0C0',
                        }
                      }}
                    />
         </Item>
    </Right>
</CardItem>
。。。
进口{
容器、标题、内容、卡片、输入、,
卡片项、文本、右侧、图标、页脚、页脚选项卡、,
左侧,正文,标题,按钮,项目}
来自“本土基地”;
从“react native DatePicker”导入日期选择器;
...
租金金额
this.onChangeNumberFormat(文本'RentalAmount')}
style={style.valueText}
/>
租赁开始日期
this.onChangeText(文本'LeaseStartDate')}
自定义样式={{
日期输入:{
边框宽度:0,
alignItems:“灵活启动”
},
日期文本:{
颜色:'#C0C0',
}
}}
/>

如图所示,数据下的行比输入下的行短。如何使这些线的大小相同


谢谢

您可以在
样式
道具中设置宽度,如下所示:

<DatePicker
  style={{ width: 100 }}
  date={LeaseStartDate}
  ...
/>

这条线不是设定好的吗?另外,行大小不应该在属性中自动设置吗?您使用的库与
本机库不同,有时其样式并不总是适用。如果我没有错的话,
本机基址
有自己的
。您是否尝试过使用它来查看它是否与
组件配合良好?