我正在尝试使用wix 的 react-native-calendars 库构建日历。例如,当我点击 2018 年 12 月 5 日时Calendar Component
,它应该导航到 2018 年 12 月 5 日Agenda Component
。这就是我想要做的。
这是我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;
我也是这里提到的解决方案。但没有运气。
编辑:
这是我的 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;
日历通过 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 更改为 day
同样的问题。onSelect 导航到 AgentScreen 并将导航道具传递给它(其中包含 day 对象),反过来,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 对象从 state 解包到一个名为 params 的变量中。
WeeklyAgenda 现在可以做
selected={this.props.day}
我认为这里的问题根本不是绑定。我建议阅读这篇文章或其他关于绑定功能的文章。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句