在 react-native-datepicker 中将文本左对齐

Question

我想将 react-native-datepicker 文本左对齐。默认情况下它是居中的。我尝试更改 style 和 customstyle props，但没有用。

如何左对齐文本？

<DatePicker
                    style={styles.datePicker}
                    date={this.state.birthday}
                    mode="date"
                    placeholder="Birthday"
                    format="YYYY-MM-DD"
                    minDate="1950-01-01"
                    maxDate="2018-06-01"
                    confirmBtnText="Ok"
                    cancelBtnText="Cancel"
                    showIcon={false}
                    customStyles={{
                      dateInput: { 
                        borderWidth: 0,
                        borderBottomWidth: 2
                      },
                      placeholderText: {
                        fontSize: 20,
                        color: "#C7C7C7"
                      },
                      dateText: {
                        fontSize: 20,
                        color: "black",
                        textAlign: "left"
                      }
                    }}
                    onDateChange={birthday => this.setState({birthday: birthday})}
                  />

Answer 1

只需编辑您的 dateInput:{
alignItems: "flex-start" }

constructor(props) {

    super(props);
    this.state = {
        chosenDate: new Date(),
        date: '15-05-2018' ,
        visible: false

    };
}

<Item rounded style={[styles.inputStyle, { marginTop: 6 }]}>
      <DatePicker
          style={[styles.inputmain]}
          placeholder= "DOB"
          date={this.state.date} //initial date from state
          mode="date" //The enum of date, datetime and time
          placeHolderTextStyle={{ color: "#cc0000" }}
          format="DD-MM-YYYY"
          minDate="01-01-1900"
          maxDate="01-01-2019"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"   
          onDateChange={date => {
            this.setState({ date: date });
          }}
          customStyles={{
            dateInput: { 
              borderWidth: 0,
              borderBottomWidth: 2,
              alignItems: "flex-start"
            },
            placeholderText: {
              fontSize: 17,
              color: "white"
            },
            dateText: {
              fontSize: 17,
              color: "white",
            }
          }}
      />
</Item>

参考：https : //github.com/xgfe/react-native-datepicker/issues/220