Даты React-native-calendar-picker исчезают при переключении нижней панели вкладок - PullRequest
0 голосов
/ 18 сентября 2018

У меня есть нативное приложение, которое имеет компонент календаря, я использую 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, но я нигде не использовал его в своем коде.Любая помощь с этим будет оценена.

Большое спасибо, Викрам

...