native-base: выравнивание по левому краю выбора и ввода - PullRequest
Новая
       39

native-base: выравнивание по левому краю выбора и ввода

0 голосов
/ 15 октября 2018

Обновление: добавлен DatePicker.

В следующем коде я не могу выровнять три элемента по левому краю (первый сдвинут вправо).Есть идеи, как это сделать? 

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>
    );
  }
}

1 Ответ

0 голосов
/ 15 октября 2018

Можете ли вы попробовать это 

<Item last style={{ paddingLeft: 0, marginLeft: 0 }}>

вместо 

<Item last style={{ padding: 0, margin: 0 }}>
Снимки экрана До изменения

После изменения

Ниже приведен обновленный код 

import React from 'react';
import {
  Container,
  Content,
  Icon,
  Form,
  Item,
  Input,
  Label,
  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 picker>
              <Label>Type:</Label>
              <Picker
                mode="dropdown"
                iosIcon={<Icon name="ios-arrow-down-outline" />}
                placeholderStyle={{ color: '#bfc6ea' }}
                selectedValue="value1">
                <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 value="aaa bbb ccc" />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}
...