我正在尝试使用react-native-calendars library by wix构建日历。
例如,当我在Calendar Component
中单击2018年12月5日时,它应在Agenda Component
上导航至2018年12月5日。这就是我想要做的。
这是我用于Calendar Component
的代码,我试图在其中获取ID并将其绑定:
class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
active: 'true'
}
}
render() {
const {onSelect} = this.props;
return (
<View>
<CalendarList
keyExtractor = {day=>day.id}
onDayPress={(day) => {onSelect.bind(this, day)}}
pastScrollRange={12}
futureScrollRange={12}
scrollEnabled={true}
showScrollIndicator={true}
/>
</View>
);
}
}
Calendar.propTypes = {
onSelect: PropTypes.func,
}
这是我进行导航的代码CalendarScreen
。
const CalendarScreen = ({navigation}) => (
<View >
<Calendar navigation={navigation}
onSelect={(id)=>{
navigation.navigate('Agenda', {id}) }}>
<StatusBar backgroundColor="#28F1A6" />
</Calendar >
</View>
);
Calendar.propTypes = {
navigation: PropTypes.object.isRequired
}
export default CalendarScreen;
我也提到了here的解决方案。但没有运气。
编辑:
这是我的Agenda Component
class WeeklyAgenda extends Component {
constructor(props) {
super(props);
this.state = {
items: {}
};
}
render() {
return (
<View style={{height:600}}>
<Agenda
items={this.state.items}
loadItemsForMonth={this.loadItems.bind(this)}
selected={Date()}
renderItem={this.renderItem.bind(this)}
renderEmptyDate={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
onRefresh = {() => { this.setState({refeshing : true})}}
refreshing = {this.state.refreshing}
refreshControl = {null}
pastScrollRange={1}
futureScrollRange = {3}
/>
);
}
这是AgendaScreen
const AgendaScreen = ({navigation}) => (
<View style={{height: 100}}>
<WeeklyAgenda navigation={navigation}>
<StatusBar backgroundColor="#28F1A6" />
</WeeklyAgenda >
</View>
);
WeeklyAgenda.propTypes = {
navigation: PropTypes.object.isRequired
}
export default AgendaScreen;
答案 0 :(得分:1)
Calender将CalenderScreen传递给onSelect(id)回调。
日历屏幕只需要调用onSelect(day)。
onDayPress={(day) => {onSelect(day)}}
或者让回调函数同时接受导航对象和日期
onDayPress={(day) => {onSelect(day, navigation)}}
日历现在应该设置
onSelect={(day, navigation)=>{
navigation.navigate('Agenda', {day}) }}>
或者当您将导航对象传递给日历时,为什么要传递回调函数
onDayPress={(day) => {this.props.navigation.navigate('Agenda', {day})}}
编辑:新课程,并将ID更改为天
同样的问题。 onSelect导航到AgentScreen并将其传递给导航道具(其中包含一天对象),然后,AgentScreen将导航道具传递给WeeklyAgent,但是WeeklyAgent并不使用导航道具来获取ID。
selected={Date()}
使用今天的日期创建一个新的日期对象。 要获取正确的日期,您需要从导航中获取日期,通常是类似
的内容this.props.navigation.state.params["day"]
返回日期。
现在,如果WeeklyAgenda实际不进一步使用导航,我将不会通过。
相反,“每周”议程应该有一个“天”道具,所以应该代替
<WeeklyAgenda navigation={navigation}>
尝试
const { params } = this.props.navigation.state;
...
<WeeklyAgenda day={params["day"}>
第一行将params对象从状态解压缩到称为params的变量中。
WeeklyAgenda现在可以做
selected={this.props.day}
我认为这里的问题根本不是绑定。 我建议阅读此article或其他有关绑定功能的信息。