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