本教程的实现效果如下:
为了实现其淡入/淡出的覆盖效果,还有取消按钮,在此用了一个三方的组件,大家可以先安装一下:
三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet(可以看看,也可以直接按我的步骤走)
1。在终端的该工程目录下运行:npm安装react-native-custom-action-sheet——保存
2. 然后运行:npm开始
3.具体实现代码如下:
进口的反应,从“反应”{组件};
进口{
AppRegistry,
样式表,
文本,
看来,
TouchableHighlight,
DatePickerIOS
从“react-native”};//这是一个三方组件github地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet
var CustomActionSheet=要求(“react-native-custom-action-sheet”);
类演示扩展组件{
状态={
datePickerModalVisible:假的,//选择器显隐标记
chooseDate:新日期()//选择的日期
};
_showDatePicker(){//切换显隐标记
这一点。设置状态({datePickerModalVisible: ! this.state.datePickerModalVisible});
};
_onDateChange(日期){//改变日期状态
警报(日期);//弹出提示框:显示你选择日期
this.setState ({
chooseDate:日期
}）;
};
呈现(){
让datePickerModal=(//日期选择器组件(根据标记赋值为选择器或空)
this.state。datePickerModalVisible & # 63;
& lt; CustomActionSheet
modalVisible={this.state。datePickerModalVisible}//显隐标记
虚={()=祝辞this._showDatePicker()}祝辞//点击取消按钮触发事件
& lt;视图风格={styles.datePickerContainer}比;
& lt; DatePickerIOS
模式={" datetime}//选择器模式:“日期”(日期),“时间”时(间),“datetime”(日期和时间)
minimumDate={新的日期()}//最小时间(这里设置的是当前的时间)
minuteInterval={30}//最小时间间隔(这里设置的是30分钟)={this.state日期。chooseDate}//默认的时间
onDateChange={this._onDateChange.bind()}//日期被修改时回调此函数/比;
& lt;/View>
& lt;/CustomActionSheet>:零
);
回报(
& lt;视图风格={styles.container}比;
& lt; TouchableHighlight
风格={{写成backgroundColor:“青色”,填充:5}}
onPress={()=祝辞this._showDatePicker()}//按钮:点击触发方法
underlayColor=盎疑?
比;
& lt;文本在显示DatePick
& lt;/TouchableHighlight>
{datePickerModal}//日期选择组件
& lt;/View>
);
}
}
const风格=StyleSheet.create ({
容器:{
flex: 1、
justifyContent:“中心”,
alignItems:“中心”,
写成backgroundColor:“# F5FCFF ',
}，
datePickerContainer: {
flex: 1、
borderRadius: 5
justifyContent:“中心”,
alignItems:“中心”,
写成backgroundColor:“白”,
marginBottom: 10,
}，
}）;
AppRegistry。registerComponent(“演示”,()=比;演示);
之前
写好了,在终端中运行:react-native run-ios就能看到效果了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
