React native 本机基址：左对齐选择器和输入

更新：添加了日期选择器。

在下面的代码中，我无法将三个项目左对齐（第一个项目向右移动）。你知道怎么做吗

import React from "react";
import { Text } from "react-native";
import {
  Container, Content, Icon, Form, Item, Input, Label, DatePicker, Picker
} from "native-base";

export default class Test extends React.Component {

  render() {
    return (
      <Container style={{ flex: 1, backgroundColor: '#fff' }}>
        <Content padder>
          <Form style={{ flex: 1, alignItems: 'flex-start' }}>

            <Item style={{ flexDirection: 'column', marginBottom: 10,
               paddingLeft: 0, marginLeft: 0 }}>
              <DatePicker
                defaultDate={new Date()}
                locale={"en"}
                timeZoneOffsetInMinutes={undefined}
                modalTransparent={false}
                animationType={"fade"}
                androidMode={"default"}
                placeHolderText="Click here to select date"
                textStyle={{ color: "#d3d3d3" }}
                placeHolderTextStyle={{ color: "#b3b3b3", fontSize: 16, fontStyle: 'italic' }}
                onDateChange={() => console.log('date change')}
                />
              <Text>
                Date: {new Date().toString().substr(4, 12)}
              </Text>
            </Item>

            <Item picker>
              <Label>Type:</Label>
              <Picker
                mode="dropdown"
                iosIcon={<Icon name="ios-arrow-down-outline" />}
                style={{ width: undefined }}
                placeholder="Select medical item type"
                placeholderStyle={{ color: "#bfc6ea" }}
                placeholderIconColor="#007aff"
                selectedValue="value1"
                onValueChange={() => console.log("onValueChange")}
              >
                <Picker.Item label="label1" value="value1" />
                <Picker.Item label="label2" value="value2" />
              </Picker>
            </Item>

            <Item last style={{ paddingLeft: 0, marginLeft: 0 }}>
              <Label>Notes:</Label>
              <Input
                block
                style={{ height: 100 }}
                multiline={true}
                keyboardType="default"
                label="Notes"
                placeholder="Enter notes (if any)..."
                value="aaa bbb ccc aaa bbb ccc aaa bbb ccc aaa bbb ccc aaa bbb ccc "
                textContentType="none"
                onChangeText={() => console.log("bla")}
                onBlur={() => console.log("bla")}
                onFocus={() => console.log("bla")}
              />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

从“React”导入React；
从“react native”导入{Text}；
进口{
容器、内容、图标、表单、项目、输入、标签、日期选择器、选择器
}来自“本土基地”；
导出默认类测试扩展React.Component{
render（）{
返回(
console.log（'datechange'）}
/>
日期：{new Date（）.toString（）.substr（4,12）}
类型：
console.log（“onValueChange”）}
>
笔记：
console.log（“bla”）}
onBlur={（）=>console.log（“bla”）}
onFocus={（）=>console.log（“bla”）}
/>
);
}
}

你能试试这个吗

---

非常感谢，你做到了。现在有一个额外的问题：）我更新了代码。您也可以对齐日期选择器吗？您确定更新后的代码没有运行并且出现以下错误“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义”。即使是官方网站（）上的示例也出现了相同的错误。您能告诉我是否需要任何隐藏的配置吗？不清楚，但我认为与这一行相关的timeZoneOffsetInMinutes={undefined}适合我。尝试将其删除，或将其设置为值。