反应本机 DatePicker 相同大小的输入

Question

如何使 DatePicker 的 Item 行与 Input 的大小相同？

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

如图所示，数据下方的线比输入下方的线短。我怎样才能使这些线的大小相同？

谢谢

Answer 1

您可以像这样在 style 属性中设置宽度：

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

反应本机 DatePicker 相同大小的输入

React native DatePicker same size Input

react-native

native-base