Question

我有一个带有日历组件的React Native应用，我正在使用react-native-calendar-picker ("^5.21.0")。我有一个react-native-tab-navigator(^0.3.4)可以导航到其他屏幕。现在，当我第一次加载日历组件时，所有日期看起来都很好，但是当我不断在选项卡之间切换时，每次我点击日历选项卡时，就会消失6个日期，并且每次我切换到其他选项卡并返回时，这种情况都会继续直到屏幕上的每个项目都被删除，然后应用最终以trying to remove a view index above child count 3错误崩溃。我的日历组件看起来像这样，

import React, { Component } from 'react'
import {Text,View, LayoutAnimation} from 'react-native'
import {Badge, Container} from 'native-base'
import styles from './styles'
import CalendarPicker from 'react-native-calendar-picker'
import Header from '../common/Header'
import moment from 'moment'

class Attendance extends Component{

constructor(props){
    super(props)
    this.getAttendance = this.getAttendance.bind(this)
}

getAttendance = (attendance) =>{
    let today = moment();
    let day = today.clone().startOf('month');
    let customDatesStyles = [];
    while(day.add(1, 'day').isSame(today, 'month')) {
        thisDay = day.format('YYYY-MM-DD')
        for(let i = 0; i < attendance.length; i++){
            if(thisDay === attendance[i].attendanceDate){
                if(attendance[i].state === 'P'){
                    customDatesStyles.push({
                        date: day.clone(),
                        style: {backgroundColor: '#148F77'}
                    })
                }
                else{
                    customDatesStyles.push({
                        date: day.clone(),
                        style: {backgroundColor: '#CB4335'}
                    })

                }

            }
        }
    }
    return customDatesStyles
}

  render(){
    const studentAttendance = this.props.studentAttendance
    let customDatesStyles =[]
    customDatesStyles =this.getAttendance(studentAttendance)        
        return(
            <Container>
                <View>
                    <Header />
                    <CalendarPicker
                        onDateChange={this.onDateChange}
                        customDatesStyles={customDatesStyles}  
                    />
                </View>
                <View style={styles.badgeView}>
                    <Badge style={styles.presentBadge} />
                        <Text style={styles.textBadge}>Present</Text>
                </View>

                <View style={styles.badgeView}>
                    <Badge style={styles.absentBadge} />
                        <Text style={styles.textBadge}>Absent</Text>
                </View>
            </Container>
          )
    }
}

export default Attendance;

我花了太多时间尝试不同的事情，但没有成功。一些线程使我意识到LayoutAnimation有问题，但是我在代码中的任何地方都没有使用它。任何帮助，将不胜感激。

非常感谢，维克拉姆

react-native-calendar-picker日期在切换底部的标签栏上消失

0 个答案: