• ReactNative日历组件

    2020-06-12 23:30:05
    该模块包含各种可自定义的React Native 日历组件
  • 日历控件。先上图吧 image.png ======================js文件========================== import React from 'react'; import { View, StyleSheet, Text, Modal, TouchableOpacity, Dimensions, I...
        

    日历控件。先上图吧


    1426137-c5183cc1c61522b5.png
    image.png

    ======================js文件==========================

    import React from 'react';

    import {
    View,
    StyleSheet,
    Text,
    Modal,
    TouchableOpacity,
    Dimensions,
    Image,
    FlatList,
    } from 'react-native'
    import LogUtil from "../../support/utils/LogUtil";
    const {width,height} =Dimensions.get('window')
    // import DatePicker from 'rt-datepicker';
    import moment from 'moment';

    var toYear = (moment(new Date()).format('YYYY'))
    var toMonth = (moment(new Date()).format('MM'))

    export default class RNCalendar_CL extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            modalVisible:false,
            selectedDate:'',
            dayData: [],
            month: toMonth,
            year: toYear,
            color:[],
        }
    }
    
    showModal(){
        LogUtil.log('calender:'+this.props.defaultDate);
        this.setState({modalVisible:true})
    }
    
    cancelModal(){
        this.setState({modalVisible:false})
    }
    
    dateChanged(date){
        this.setState({modalVisible:false});
        this.props.dateChanged(date);
    }
    
    // ==============================日历相关======================================
    
    componentDidMount() {
        var dayCount = this.getDaysOfMonth(toYear, toMonth)
        var dayIn = this.getFirstDay(toYear, toMonth)
        var temp = []
        var color = []
        for (var i = 1; i < dayIn; i++) {
            temp.push(' ')
            color.push(0)
        }
        for (var i = 1; i <= dayCount; i++) {
            temp.push(i)
            color.push(0)
        }
        this.setState({
            dayData: temp,
            color:color,
        })
    
    }
    
    
    
    createHeaderBar = () =>{
        return(
            <View style={{
                height: 50,
                width: width,
                backgroundColor: '#FFFFFF',
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center'
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    style={{marginLeft: 10}}
                    onPress={this.clickPrevious}>
                    {/*<Image*/}
                    {/*style={{*/}
                    {/*height: 30,*/}
                    {/*width: 30*/}
                    {/*}}*/}
                    {/*source={require('../../../resource/images/waitTransferOwner/add.png')}*/}
                    {/*resizeMode={'contain'}/>*/}
                    <Text style={{fontSize:14,
                        color:'#9EA3AD',
                    }}>上个月</Text>
                </TouchableOpacity>
                <Text style={{
                    fontSize: 16,
                    color:'#243047'
                }}>
                    {this.state.year + '年' + this.state.month + '月'}
                </Text>
                <TouchableOpacity
                    activeOpacity={1}
                    style={{marginRight: 10}}
                    onPress={this.clickNext}>
                    {/*<Image*/}
                    {/*style={{*/}
                    {/*height: 30,*/}
                    {/*width: 30*/}
                    {/*}}*/}
                    {/*source={require('../../../resource/images/waitTransferOwner/add.png')}*/}
                    {/*resizeMode={'contain'}/>*/}
                    <Text style={{fontSize:14,
                        color:'#9EA3AD',
                    }}>下个月</Text>
                </TouchableOpacity>
            </View>
        )
    }
    
    createDayBar = () =>{
        return(
            <View style={{
                height: 40,
                width: width,
                alignItems: 'center',
                flexDirection: 'row',
            }}>
                {this.createLab()}
            </View>
        )
    }
    
    createLab = () => {
        var dateArray = ['一', '二', '三', '四', '五', '六', '七']
        var array = []
        for (var i = 1; i < 8; i++) {
            array.push(
                <View
                    key={I}
                    style={{
                        width: width / 7,
                        height: 40,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#FFFFFF'
                    }}>
                    <Text style={{
                        color: '#243047',
                        fontSize: 16
                    }}>
                        {dateArray[i - 1]}
                    </Text>
                </View>
            )
        }
        return array
    }
    creatContent = () =>{
        return(
            <FlatList
                data={this.state.dayData}
                numColumns={7}
                horizontal={false}
                extraData={this.state}
                renderItem={this.renderItem}
                keyExtractor={this.keyExtractor}/>
        )
    }
    clickItem = (item, index) => {
        if (item == ' ') {
            return
        }
        var temp = this.state.color
        if (temp[index] == 1) {
            temp[index] = 0
        }
        else if (temp[index] == 0) {
            temp[index] = 1
        }
        this.setState({
            selectedDate:(toYear+'-'+toMonth+'-'+item),
            color:temp
        },()=>{
            LogUtil.log('我选择的日期是'+this.state.selectedDate);
            this.dateChanged(this.state.selectedDate)
        })
    
    }
    
    
    
    renderItem = ({item,index}) => {
        return (
            <TouchableOpacity
                activeOpacity={1}
                onPress={this.clickItem.bind(this, item, index)}>
                <View
                    style={{
                        width: width / 7,
                        height: 40,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderRadius: 5,  //圆角5
                        borderWidth: 1,
                        borderColor:'white',
                        backgroundColor:(toYear+'-'+toMonth+'-'+item)===this.state.selectedDate ? '#3576F0' : 'white',
    
                    }}>
                    <Text
                        style={{color: (toYear+'-'+toMonth+'-'+item)===this.state.selectedDate ? 'white' : '#243047'}}>{item}</Text>
                </View>
            </TouchableOpacity>
        )
    }
    
    keyExtractor = (item, index) => 'Zdate' + index
    
    getDaysOfMonth = (year, month) => {
        var day = new Date(year, month, 0)
        var dayCount = day.getDate()
        return dayCount
    }
    
    getFirstDay = (year, month) => {
        var day = new Date(year, month - 1)
        var dayCount = day.getDay()
        if (dayCount == 0) {
            dayCount = 7
        }
        return dayCount
    }
    clickNext = () => {
        toMonth++
        if (toMonth > 12) {
            toMonth = 1
            toYear++
        }
        this.setState({
            month: toMonth,
            year: toYear
        })
    
        var dayCount = this.getDaysOfMonth(toYear, toMonth)
        var dayIn = this.getFirstDay(toYear, toMonth)
        var temp = []
        var color = []
        for (var i = 1; i < dayIn; i++) {
            temp.push(' ')
            color.push(0)
        }
        for (var i = 1; i <= dayCount; i++) {
            temp.push(i)
            color.push(0)
        }
        this.setState({
            dayData: temp,
            color:color,
        })
    }
    
    clickPrevious = () => {
        toMonth--
        if (toMonth < 1) {
            toMonth = 12
            toYear--
        }
        this.setState({
            month: toMonth,
            year: toYear
        })
        var dayCount = this.getDaysOfMonth(toYear, toMonth)
        var dayIn = this.getFirstDay(toYear, toMonth)
        var temp = []
        for (var i = 1; i < dayIn; i++) {
            temp.push(' ')
        }
        for (var i = 1; i <= dayCount; i++) {
            temp.push(i)
        }
        this.setState({
            dayData: temp
        })
    }
    

    // ==============================日历相关======================================

    render(){
        return <Modal animationType="fade"  //slide
                                    visible={this.state.modalVisible}
                                    transparent={true}
                                    onRequestClose={()=>this.setState({modalVisible:false})}
        >
            <View style={styles.modalStyle}>
                <View style={styles.subView}>
                    <View style={styles.canlendarStyle}>
                        {this.createHeaderBar()}
                        <View style={{
                            width: '100%',
                            height: 0.5,
                            alignSelf: 'center',
                            borderBottomWidth: 1,
                            borderBottomColor: '#dddddd',
                        }}/>
                        {this.createDayBar()}
                        {this.creatContent()}
    
    
                    </View>
    
                    {/*取消按钮*/}
                    <TouchableOpacity
                        style={[styles.actionItem,this.props.itemStyle,{borderTopWidth:0,height:50,marginBottom:-5}]}
                        onPress={()=>this.setState({modalVisible:false})}>
                        <Text style={styles.actionItemTitle}>取消</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    }
    

    }

    const styles = StyleSheet.create({
    modalStyle:{
    justifyContent:'flex-end',
    alignItems:'center',
    flex:1,
    backgroundColor:'rgba(0,0,0,0.2)'
    },
    subView:{
    justifyContent:'flex-end',
    flexDirection: 'column',
    alignItems:'center',
    alignSelf:'stretch',
    width:width,
    backgroundColor:'#fff'

    },
    canlendarStyle:{
        width:width,
        height:320,
        alignItems:'center',
        justifyContent:'center',
        borderTopColor:'#cccccc',
        borderTopWidth:0.5,
        backgroundColor: 'white',
    },
    actionItemTitle:{
        fontSize:18,
        color:'blue',
        textAlign:'center',
    },
    

    })

    ======================js文件==========================
    用的时候 都在同一个界面

    1. import RNCalendar_CL from "../../RNCalendar_CL";
    2.  <RNCalendar_CL
                   ref="RNCalendar_CL"
                   dateChanged={(date) => this.dateChanged(date)}
               />
      
    3. 写一个按钮 呼出日历 :
      this.refs.RNCalendar_CL.showModal();

    4.当点击确定的时候:
    //从日历选择日期结果回调
    dateChanged = (date) => {
    };
    嗯 就酱

    展开全文
  • 这次介绍的这个React Native日历日程组件名叫react-native-calendars,是纯JS开发,可以适配IOS和安卓双平台。使用方便,功能强大,可以通过配置自定义样式和主题,更重要的是它支持日程显示。下面我们来看看这个...

    这次介绍的这个React Native日历日程组件名叫react-native-calendars,是纯JS开发,可以适配IOS和安卓双平台。使用方便,功能强大,可以通过配置自定义样式和主题,更重要的是它支持日程显示。下面我们来看看这个组件的使用方法。

    http://mp.weixin.qq.com/s/zS4VbGJh4WVxkP9xMIN3iw

    安装

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

    因为是纯JS的,所以不需要link,执行完就可以了。

    使用

    react-native-calendars主要包含三种子组件,分别是 Calendar(日历), CalendarList(日历列表), Agenda(日程),可以根据实际需要选择使用。下面我们分别介绍这三种组件的使用示例。

    Calendar(日历)

    示例代码

    1. <Calendar

    2.  // Initially visible month. Default = Date()

    3.  current={'2012-03-01'}

    4.  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined

    5.  minDate={'2012-05-10'}

    6.  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined

    7.  maxDate={'2012-05-30'}

    8.  // Handler which gets executed on day press. Default = undefined

    9.  onDayPress={(day) => {console.log('selected day', day)}}

    10.  // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting

    11.  monthFormat={'yyyy MM'}

    12.  // Handler which gets executed when visible month changes in calendar. Default = undefined

    13.  onMonthChange={(month) => {console.log('month changed', month)}}

    14.  // Hide month navigation arrows. Default = false

    15.  hideArrows={true}

    16.  // Replace default arrows with custom ones (direction can be 'left' or 'right')

    17.  renderArrow={(direction) => (<Arrow />)}

    18.  // Do not show days of other months in month page. Default = false

    19.  hideExtraDays={true}

    20.  // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out

    21.  // day from another month that is visible in calendar page. Default = false

    22.  disableMonthChange={true}

    23.  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.

    24.  firstDay={1}

    25.  // Hide day names. Default = false

    26.  hideDayNames={true}

    27. />

    CalendarList(日历列表)

    示例代码

    1. <CalendarList

    2.  // Callback which gets executed when visible months change in scroll view. Default = undefined

    3.  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}

    4.  // Max amount of months allowed to scroll to the past. Default = 50

    5.  pastScrollRange={50}

    6.  // Max amount of months allowed to scroll to the future. Default = 50

    7.  futureScrollRange={50}

    8.  // Enable or disable scrolling of calendar list

    9.  scrollEnabled={true}

    10.  ...calendarParams

    11. />

    Agenda(日程)

    示例代码

    1. <Agenda

    2.  // the list of items that have to be displayed in agenda. If you want to render item as empty date

    3.  // the value of date key kas to be an empty array []. If there exists no value for date key it is

    4.  // considered that the date in question is not yet loaded

    5.  items={

    6.    {'2012-05-22': [{text: 'item 1 - any js object'}],

    7.     '2012-05-23': [{text: 'item 2 - any js object'}],

    8.     '2012-05-24': [],

    9.     '2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],

    10.    }}

    11.  // callback that gets called when items for a certain month should be loaded (month became visible)

    12.  loadItemsForMonth={(month) => {console.log('trigger items loading')}}

    13.  // callback that gets called on day press

    14.  onDayPress={(day)=>{console.log('day pressed')}}

    15.  // callback that gets called when day changes while scrolling agenda list

    16.  onDayChange={(day)=>{console.log('day changed')}}

    17.  // initially selected day

    18.  selected={'2012-05-16'}

    19.  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined

    20.  minDate={'2012-05-10'}

    21.  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined

    22.  maxDate={'2012-05-30'}

    23.  // Max amount of months allowed to scroll to the past. Default = 50

    24.  pastScrollRange={50}

    25.  // Max amount of months allowed to scroll to the future. Default = 50

    26.  futureScrollRange={50}

    27.  // specify how each item should be rendered in agenda

    28.  renderItem={(item, firstItemInDay) => {return (<View />);}}

    29.  // specify how each date should be rendered. day can be undefined if the item is not first in that day.

    30.  renderDay={(day, item) => {return (<View />);}}

    31.  // specify how empty date content with no items should be rendered

    32.  renderEmptyDate={() => {return (<View />);}}

    33.  // specify how agenda knob should look like

    34.  renderKnob={() => {return (<View />);}}

    35.  // specify your item comparison function for increased performance

    36.  rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}

    37.  // Hide knob button. Default = false

    38.  hideKnob={true}

    39.  // By default, agenda dates are marked if they have at least one item, but you can override this if needed

    40.  markedDates={{

    41.    '2012-05-16': {selected: true, marked: true},

    42.    '2012-05-17': {marked: true},

    43.    '2012-05-18': {disabled: true}

    44.  }}

    45.  // agenda theme

    46.  theme={{

    47.    ...calendarTheme,

    48.    agendaDayTextColor: 'yellow',

    49.    agendaDayNumColor: 'green',

    50.    agendaTodayColor: 'red',

    51.    agendaKnobColor: 'blue'

    52.  }}

    53.  // agenda container style

    54.  style={{}}

    55. />

    说明

    react-native-calendars组件的GitHub 地址:https://github.com/wix/react-native-calendars,更多的配置和使用方法请点击查看原文查看GitHub上的文档以及示例代码。

    展开全文
  • 支持滑动的ReactNative日历控件
  • 项目地址: react-native-...已经有了react-native-calendar-strip为何还需要我这个日历控件? 一般的甲方都会在一个页面上拖动拖动, 看到一个日历, 就想滑动切换上下周, 由于react-native-calendar-strip没有滑动特...

    项目地址: react-native-slideable-calendar-strip

    演示地址: Calendar-Strip.mp4

    为何要再实现一个日历控件

    已经有了react-native-calendar-strip为何还需要我这个日历控件?

    一般的甲方都会在一个页面上拖动拖动, 看到一个日历, 就想滑动切换上下周, 由于react-native-calendar-strip没有滑动特性, 并且在这个issue上讨论了好久, 并没有可行的方案. 于是就萌发自己写一个日历插件的冲动.

    控件需要有何特性

    • 左右滑动
    • 农历展示
    • 选中日期
    • 事件标识
    • 下滑手势
    • 回到今日

    开发过程

    要开发一个日历控件, 最大的问题就是日期的转换, 虽然Moment.js被很多人使用, 但是Moment使用大量的面向对象的API, 严重影响性能, 这也是在我尝试了Moment之后发现的, 于是就换上了datefns, 轻量级js日期控件, 完全的函数式风格, 在日历控件中只需保存Date数据, 其他的日期比较/转换等操作都交给datefns.

    其次最头疼的问题是使用FlatList展示数据时候, 如何动态生成新的数据.

    在日历控件首次加载时候, 会生成5个周的日期, 将FlatList滚动到中间一页(今天所在的周, 第2页, 从0开始). 当用户滑动到最后一页, 就需要再次生成2个周的数据拼接到尾部, 当用户滑动到第一页, 就需要生成2个周的数据拼接到数组首部, 并且这时候今天所在的页数也会变化, 所以要将今天所在的周的页数+2, 拼接到首部会影响FlatList数据展示, 会展示第一页数据, 此时的第一页数据是最新生成的日期, 所以要滚动到第二页(从0页开始).

      loadPreviousTwoWeek(originalDates) {
        const originalFirstDate = originalDates[0];
        const originalLastDate = originalDates[originalDates.length-1];
        const firstDayOfPrevious2Week = subDays(originalFirstDate, 7 * 2);
        // 生成两周之前的第一天到原始数据最后一天的日期
        const eachDays = eachDay(firstDayOfPrevious2Week, originalLastDate);
        this.setState(prevState => ({
          datas: eachDays,
          currentPage: prevState.currentPage+2,
          pageOfToday: prevState.pageOfToday+2,
        }), () => {
          // 悄无声息滚动
          this.scrollToPage(2, false);
        });
      }
    复制代码

    滑动到最后一页需要加载下两周日期:

    //  onEndReached={() => { this.onEndReached(); } }
    //  onEndReachedThreshold={0.01}
      onEndReached() {
        // console.log('onEndReached');
        this.loadNextTwoWeek(this.state.datas);
      }
      loadNextTwoWeek(originalDates) {
        const originalFirstDate = originalDates[0];
        const originalLastDate = originalDates[originalDates.length-1];
        const lastDayOfNext2Week = addDays(originalLastDate, 7 * 2);
        const eachDays = eachDay(originalFirstDate, lastDayOfNext2Week);
        this.setState({ datas: eachDays });
      }
    复制代码

    ScrollViewonMomentumScrollEnd属性监听页数变化, 记录今天所在周的页数和当前展示的页数

    // onMomentumScrollEnd={this.momentumEnd}
    // scrollEventThrottle={500}
      momentumEnd = (event) => {
        const firstDayInCalendar = this.state.datas ? this.state.datas[0] : new Date();
        // 从第一天到今天一共多少天
        const daysBeforeToday = differenceInDays(firstDayInCalendar, new Date());
        // ~~向下取整, 第一天到今天一共几周, 也就是今天所在周所在的页数
        const pageOfToday = ~~(Math.abs(daysBeforeToday / 7));
        const screenWidth = event.nativeEvent.layoutMeasurement.width;
        // 通过offset来获取当前所在页数
        const currentPage = event.nativeEvent.contentOffset.x / screenWidth;
        // 记录今天所在周页数, 当前展示周的页数, 今天所在周是否被展示
        this.setState({
          pageOfToday,
          currentPage,
          isTodayVisible: currentPage === pageOfToday,
        });
    
        // 如果滑动到第一页了就需要加载之前两周数据
        if (event.nativeEvent.contentOffset.x < width) {
          this.loadPreviousTwoWeek(this.state.datas);
        }
      }
    复制代码

    最棘手的问题是用户点击了日历之外的一个button, 跳转到日历上指定的一天.

    1. 指定日期正好在当前展示的一个周内
      currentPageDatesIncludes = (date) => {
        const { currentPage } = this.state;
        const currentPageDates = this.state.datas.slice(7*currentPage, 7*(currentPage+1));
        // dont use currentPageDates.includes(date); because can't compare Date in it
        return !!currentPageDates.find(d => isSameDay(d, date));
      }
    复制代码

    直接设置选中日期为指定日期.

    1. 指定日期不在当前展示周内, 但是当前控件日期数据包含指定日期
        const sameDay = (d) => isSameDay(d, nextSelectedDate);
          if (this.state.datas.find(sameDay)) {
            let selectedIndex = this.state.datas.findIndex(sameDay);
            if (selectedIndex === -1) selectedIndex = this.state.pageOfToday; // in case not find
            const selectedPage = ~~(selectedIndex / 7);
            this.scrollToPage(selectedPage);
          }
    复制代码

    找到指定日期所在周的页数, 滚动过去.

    1. 指定日期不在当前展示周内, 并且当前控件日期数据不包含指定日期
    if (isFuture(nextSelectedDate)) {
      const head = this.state.datas[0];
      const tail = endOfWeek(nextSelectedDate);
      const days = eachDay(head, tail);
      this.setState({
        datas: days,
        isTodayVisible: false,
      }, () => {
        const page = ~~(days.length/7 - 1);
        // to last page
        this.scrollToPage(page);
      });
    } else {
      const head = startOfWeek(nextSelectedDate);
      const tail = this.state.datas[this.state.datas.length - 1];
      const days = eachDay(head, tail);
      this.setState({
        datas: days,
        isTodayVisible: false,
      }, () => {
        // to first page
        this.scrollToPage(0);
      });
    }
    复制代码

    如果是未来某一天, 那么生成那天所在周的周六到当前日期控件所有日期的第一天之间的所有日期, 找到最后一页, 滚动过去.

    如果是之前某一天, 那么生成那天所在周的周日(第一天)到当前日期控件所有日期的最后一天之间的所有日期, 滚动到第一页.

    关于 pageOfTodaycurrentPage 交给 momentumEnd() 自动处理.

    滚动到页方法是利用 FlatListscrollToIndex 实现:

      scrollToPage = (page, animated=true) => {
        this._calendar.scrollToIndex({ animated, index: 7 * page });
      }
    复制代码

    下滑手势:

      componentWillMount() {
        const touchThreshold = 50;
        const speedThreshold = 0.2;
        this._panResponder = PanResponder.create({
          onStartShouldSetPanResponder: () => false,
          onMoveShouldSetPanResponder: (evt, gestureState) => {
            const { dy, vy } = gestureState;
            // 滑动距离大雨50, 并且滑动速度大于0.2, 有效下滑
            if (dy > touchThreshold && vy > speedThreshold) {
              const { onSwipeDown } = this.props;
              onSwipeDown && onSwipeDown();
            }
            return false;
          },
          onPanResponderRelease: () => {},
        });
      }
      
      // 最外层 <View {...this._panResponder.panHandlers}>
    复制代码

    其他:

    • 使用 ChineseLunar 来转换中国农历.
    • isTodayVisible 为false时在日历Header上展示一个 button
    • 点击 跳转到今天所在周的页数
    • 最终整个控件的 state 只有 :
    this.state = {
      datas: this.getInitialDates(), // 保存所有日期,
      isTodayVisible: true, // 今天所在周是否在展示
      pageOfToday: 2, // 今天在日历的第几页,  从0开始
      currentPage: 2, // 当前是日历的第几页,  从0开始
    };
    复制代码
    • 所有保存的日期都是 Date格式, 并且是0点 Wed May 16 2018 00:00:00 GMT+0800 (CST)
    • 控件所需要的props:
    CalendarStrip.propTypes = {
      selectedDate: PropTypes.object.isRequired,
      onPressDate: PropTypes.func,
      onPressGoToday: PropTypes.func,
      markedDate: PropTypes.array,
      onSwipeDown: PropTypes.func,
    };
    
    复制代码

    PS. 使用datefns另一个好处是, 当传给控件

    markedDate = ['2018-01-01', '2018-05-01', '2018-06-01']
    复制代码

    也是支持的, 不必须传一个Date格式的日期.

    如何开源

    1. 托管到GitHub

    2. 发布到npmjs

    3. travis持续集成(jest测试)

    展开全文
  • React Native CalendarView RN 日历控件
  • react-native-whc-calendar跨平台个性化日历组件.zip,A react native module to show calendar, it works on iOS and Android. 跨平台日历组件支持iOS、Android
  • 1:插件汇总 react-native-linear-gradient 颜色渐变处理 react-native-login 视频界面登录 react-native-keyboard-aware-scroll-view 键盘显示处理 react-native-popup-dialog 弹窗 react-native-dropdownalert 一...

    1:插件汇总

    react-native-linear-gradient 颜色渐变处理
    react-native-login  视频界面登录
    react-native-keyboard-aware-scroll-view 键盘显示处理
    react-native-popup-dialog 弹窗
    react-native-dropdownalert 一种非常漂亮的alert弹窗方式,从状态栏往下弹窗;
    react-native-simple-radio-button 单选按钮;
    react-native-swiper
    react-native-macos macos桌面应用
    react-native-wechat 集成微信相关SDK
    react-native-modalbox  模态弹窗
    react-native-touch-id 指纹登录
    react-native-prompt 可输入文字的弹窗
    react-native-sqlite-storage sqlite数据库存储
    react-native-permissions 权限检查
    react-native-progress-hud loading圈
    react-native-snackbar 类似toast的弹窗模式
    react-native-qrcode-svg 二维码生产工具
    native-base UI组件
    react-native-busy-indicator loading圈
    react-native-fit-image 图片展示优化
    react-native-timer 定时器管理
    react-native-scrollable-tab-view 可以左右滑动的tab
    react-native-zip-archive 解压工具
    react-native-xml2js
    react-native-spinkit 好看的loading圈
    react-native-interactable 有很强交互效果的table视图
    react-native-pull-to-refresh 下拉刷新效果
    react-native-deck-swiper 不错的swiper效果
    react-native-prefix-picker select效果
    react-native-gesture-helper 手势 向上还是向下 还是向左
    react-native-drawer-layout 抽屉效果
    react-native-sortable-listview 可拖拽排序的列表视图
    react-native-progress 进度条 长方形 圆形
    react-native-splash-screen 启动屏处理
    react-native-masked-text 指定格式的输入框
    react-native-keyboard-manager 针对IOS 键盘遮挡的问题 俺可以这么用android:windowSoftInputMode="adjustResize"
    react-native-beacons-manager 蓝牙处理
    react-native-fetch-blob  文件获取
    react-native-popup-menu 弹出菜单
    react-native-pathjs-charts 图表
    react-native-dates 日历日期选择工具
    react-native-calendar-strip 一种简单的日历处理
    react-native-simple-markdown 简单的markdown文本编辑器
    react-native-image-progress 进度条
    react-native-img-cache 图片缓存技术
    rn-placeholder 在展示具体的文字和图片之前有个加载样式处理
    react-native-pie-chart 饼状图
    react-native-maps 地图
    react-native-loading-overlay loading圈加载遮罩
    react-native-progress 圆形进度条 https://www.jianshu.com/p/d0742d421b7c
    react-native-modal  弹窗插件 https://www.npmjs.com/package/react-native-modal
    react-native-extra-dimensions-android 安卓水滴屏获取屏幕高度 https://github.com/Sunhat/react-native-extra-dimensions-android
    
    
    展开全文
  • 代码:export default class XXX extends Component{constructor(props){super(props);this.tomorrowDate=this.getTomorrow();this.state={chooseDate: this.tomorrowDate.getFullYear()+'-'+ this.tomorrowDate....

    代码:

    export default class XXX extends Component{

    constructor(props){

    super(props);

    this.tomorrowDate=this.getTomorrow();

    this.state={

    chooseDate: this.tomorrowDate.getFullYear()+'-'+ this.tomorrowDate.getMonth()+'-'+ this.tomorrowDate.getDate(),

    }



    }

    reder(){

    return(

    <View><Text onPress={()=>this.dateChoose(0)}>显示日期</Text></View>

    );

    }

    }

    展开全文
  • react-native 第三方库

    2020-06-21 15:01:25
    react-native 第三方库 React-Native-Elements 一组开发RN的UI工具包(强烈推荐) ???????????????????? react-native-calendars ???????????????? 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用...
  • 调用系统打电话、发短信、发邮件、打开网址功能https://github.com/anarchicknight/react-native-communications快速检索列表(按首字母)https://github.com/johanneslumpe/react-native-selectablesectionlistview...
  • 一款基于react日历组件
  • React Native 日期选择器

    2019-05-25 14:41:09
    React Native 中ios 有DatePickerIOS,android 有DatePickerAndroid,本人只是试了下ios,设置node= date,显示出来的效果是: render() { return ( <View style={styles.container}> <...
  • React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 ...
  • 本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮...三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet (可以看看,也可以直接按我的步骤走) 1. 在termi...
  • rn动画:http://blog.csdn.net/hello_hwc/article/details/51775696 股票金融类app:... 图形表:https://github.com/wuxudong/react-native-charts-wrapper 好看的日历控件:https://github...
  • 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现2018年马上就结束了,所以就赶年底将这篇博文写好并发布(其实是两篇:要看iOS篇的点这里...
  • react native自带的时间处理方法在实际项目使用过程中有一定的局限性,所以找了个三方的工具类moment,使用起来还是比较方便的,记录一下:1.安装:npm install moment --save 2.引入:import moment from 'moment';...
  • ReactNative资料全

    2017-02-13 09:18:09
    React Native优秀博客,以及优秀的Github库列表(很多英文资料源自于awesome-react-native) https://github.com/LeoMobileDeveloper/ReactNativeMaterials#%E4%B8%AD%E6%96%87%E5%8D%9A%E5%AE%A2 关于开源...
1 2 3 4 5 ... 20
收藏数 1,228
精华内容 491
关键字:

native日历插件 react