A date and time picker for react-native support for android and ios
npm install react-native-dateandtimesh
npm install react-native-dateandtime --save
`
$3
* not need install, on ios use js write
$3
* In android/settings.gradle
`gradle
...
include ':react-native-dateandtime'
project(':react-native-dateandtime').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dateandtime/android')
`
* In android/app/build.gradle
`gradle
...
dependencies {
...
compile project(':react-native-dateandtime')
}
`
* register module
import com.wrp.datetime.*; // <--- import
public class MainActivity extends ReactActivity {
......
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List getPackages() {
return Arrays.asList(
new DateTimePickerPackage(), // <------ add here
new MainReactPackage());
}
}
`
Usage
use as follows:
`js
{this.picker=picker}}/>
...
this.picker.showDatePicker(...)
this.picker.showTimePicker(...)
this.picker.showDateTimePicker(...)
`
* on ios, make sure must on topest view
###Example
`js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import DateTimePicker from 'react-native-dateandtime'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component {
onButtonPress(){
alert("点击了")
}
showTimePicker(){
var startDate = new Date();
this.picker1.showTimePicker(startDate, (d)=>{//d=>Date
});
}
showDatePicker(){
var startDate = new Date();
this.picker2.showDatePicker(startDate, (d)=>{
});
}
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
``