在不改变高度的情况下,议程看起来很完美。但是,如果“议程”项目的高度设置为“ 50”,则整天会有一排空白。如何将日期调整为左侧,将所有议程调整为右侧,没有任何间隙,如表格格式。更改包文件是否可以实现?
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import {Agenda} from 'react-native-calendars';
export default class AgendaScreen extends Component {
constructor(props) {
super(props);
this.state = {
items: {}
};
}
render() {
return (
<Agenda
items={this.state.items}
loadItemsForMonth={this.loadItems.bind(this)}
selected={new Date()}
renderItem={this.renderItem.bind(this)}
renderEmptyDate={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
/>
);
}
loadItems(day) {
setTimeout(() => {
for (let i = -15; i < 85; i++) {
const time = day.timestamp + i * 24 * 60 * 60 * 1000;
const strTime = this.timeToString(time);
if (!this.state.items[strTime]) {
this.state.items[strTime] = [];
const numItems = 3;
for (let j = 0; j < numItems; j++) {
this.state.items[strTime].push({
name: 'Item for ' + strTime,
height: 50
});
}
}
}
//console.log(this.state.items);
const newItems = {};
Object.keys(this.state.items).forEach(key => {newItems[key] = this.state.items[key];});
this.setState({
items: newItems
});
}, 1000);
// console.log(`Load Items for ${day.year}-${day.month}`);
}
renderItem(item) {
return (
<View style={{height: 40}}>
<View style={[styles.item, {height: item.height}]}><Text>{item.name}</Text></View>
</View>
);
}
renderEmptyDate() {
return (
<View style={styles.emptyDate}><Text>This is empty date!</Text></View>
);
}
rowHasChanged(r1, r2) {
return r1.name !== r2.name;
}
timeToString(time) {
const date = new Date(time);
return date.toISOString().split('T')[0];
}
}
const styles = StyleSheet.create({
item: {
backgroundColor: 'red',
flex: 1,
borderRadius: 5,
paddingLeft: 10,
marginRight: 10,
justifyContent: 'center',
marginTop: 5,
},
emptyDate: {
backgroundColor: 'green',
flex: 1,
borderRadius: 5,
padding: 10,
marginRight: 10,
marginTop: 5,
height:20,
}
});