美文网首页
react-native 日历(react-native-oca

react-native 日历(react-native-oca

作者: 妄自 | 来源:发表于2018-04-24 18:25 被阅读0次

😄😄😄😄react-native-ocalendar是我头一次封装npm组件,有点小激动。
不多说走起!

github地址:https://github.com/ct535101351/react-native-ocalendar

react-native-ocalendar

1.npm install react-native-ocalendar --save

2.在App.jsimport 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)
  }
  //数据设置
  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
有什么好的建议可以随时留言或者私聊都可以😄!!!
友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!

相关文章

网友评论

      本文标题:react-native 日历(react-native-oca

      本文链接:https://www.haomeiwen.com/subject/mebjlftx.html