如何在材质日期选择器中实现材质文本输入in native native？

Question

你好我在反应原生中使用物质日期选择器。

<DatePicker
   // style={{width: 200}}
    date={this.state.date}
    mode="date"
    placeholder="Date Of Birth"
    format="YYYY-MM-DD"
    minDate="2016-05-01"
    maxDate="2016-06-01"
    confirmBtnText="Confirm"
     iconSource = {uri=require('/root/VS_Code/JavascriptProjects/MatrimonialAppSvn/MatrimonialApp/assets/Images/dateofbirth.png')}

    cancelBtnText="Cancel"
    customStyles={{
      dateInput:{borderWidth: 0,marginLeft:40},
      dateIcon: {
        position: 'absolute',
        left: 0,
        top: 4,

        marginRight:200,
        marginLeft: 0
      },
      // dateInput: {
      //   marginLeft: 36
      // }
      // ... You can check the source to find the other keys.
    }}
    onDateChange={(date) => {this.setState({date: date})}}
  />

对于日期输入，我需要实现材料日期选择器，其中提示在焦点上略微上升。我知道它可以单独完成，只需单独放置一个图标和视图，但我需要在点击时打开datepicker。如果以上是不可能的，那么可以点击我的图标打开日期选择器并实现它，如果是的话怎么样？

谢谢 ：）

Answer 1

是的，你可以点击任何图标打开一个DatePicker。您可以通过重叠视图来实现它。将DatePicker放在您的图标上（您要在其上打开DatePicker）。请看下面的代码。它可能会帮助你。

render(){

  return(
  <View style={{ width: 25, height: 25 }}>

                            <View style={{ width: '100%',height:'100%' }}>
                                <Image style={{ width: 20, height: 20 }}
                                 source={icons.IC_CALENDAR} //add your icon here
                                 /> 
                            </View>
                            <DatePicker
                                style={{ 
                               position:'absolute',top:0,right:0,left:0,bottom:0 
                                }}
                                 date={this.state.date}
                                 mode="date"
                                placeholder="Date Of Birth"
                                format="YYYY-MM-DD"
                                minDate="2016-05-01"
                                maxDate="2016-06-01"
                               confirmBtnText="Confirm"
                                cancelBtnText="Cancel"

                                customStyles={{
                                    dateIcon: {
                                        position: 'absolute',
                                        left: 0,
                                        top: 4,
                                        width: 0,
                                        height: 0,
                                        marginLeft: 0
                                    }, //give width and height 0 to date 
 icon to invisible the date icon

                                }}
                                onDateChange={(date) => {
                                  this.setState({date: date})
                                }}
                            />
                        </View>
)
}