????????react-native-ocalendar是我頭一次封裝npm組件还蹲，有點小激動贮泞。
不多說走起熬北！
github地址：https://github.com/ct535101351/react-native-ocalendar
react-native-ocalendar
1.npm install react-native-ocalendar --save
2.在App.js中 import MinimalismCalendar from 'react-native-ocalendar'
3.源碼:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Alert
} from 'react-native';
import MinimalismCalendar from 'react-native-ocalendar';
export default class App extends Component {
constructor(props){
super(props)
this.state={
data:"未傳值"
}
this.DateTransfer=this.DateTransfer.bind(this)
}
//數(shù)據(jù)設置
DateTransfer(cont){
// Alert.alert(cont)
this.setState({
data:cont[0]+'-'+cont[1]+'-'+cont[2]
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{paddingVertical:15,
paddingHorizontal:30,borderRadius:3,alignItems:'center',justifyContent:'center'}}
onPress={()=>{}}>
<Text style={{fontSize:15,color:'black'}}>{this.state.data}</Text>
</TouchableOpacity>
<MinimalismCalendar DateTransfer={this.DateTransfer}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
marginTop: 30
}
});
效果圖
Demonstration.gif
