react-native: DatePickerIOS 组件无法展示

[wutianmei]

代码

 <View style={styles.container}>
        <DatePickerIOS date={this.state.initDate} onDateChange={this.setDate} />
 </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
})

原因分析

由于没有给DatePickerIOS组件指定宽度,而父组件中 alignItems:center,故而导致DatePickerIOS组件的宽度为0,所以无法展示

解决办法

• 第一种: 给DatePickerIOS指定宽度如
  <DatePickerIOS style={{ width: Dimensions.get("window").width }} date={this.state.initDate} onDateChange={this.setDate} />

• 第二种:去掉alignItems:center,因为 alignItems的默认值是stretch (如果项目未设置高度或设为auto，将占满整个容器的高度。)