logo标签列表

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

react-native
4
我想让react-native-datepicker文本左对齐。默认情况下它是居中的。我尝试更改style和customestyle属性，但没有起作用。
我该如何将文本左对齐？
<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})}
                  />
如果这对您有用，请查看此链接：https://github.com/xgfe/react-native-datepicker/issues/220。 - Priya
谢谢。问题已解决。 - Shashika Virajh
1个回答
5

只需编辑您的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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接