javascript - 如何在函数中创建模态页面？

Question

日历/index.js

constructor(props) {
this.state = {
  CalendarModalVisible: false
};
}
toggleCalendarModal = () => {
this.setState({ CalendarModalVisible: !this.state.CalendarModalVisible });  
 }
setModalPage = () => {
return(
 <Modal isVisible={this.state.CalendarModalVisible} onBackdropPress={() => 
{ this.toggleCalendarModal() }} >
 <View style={this.style.modal_container} >
 </View>
 </Modal>
);
}
renderDay(day, id) {
....
  return (
      <TouchableOpacity onPress={() => { this.setModalPage(); 
this.toggleCalendarModal() }}>
        <View style={[this.style.home_day, { height: days_len }]} key={day} 
>
          <View style={{ flex: 1, alignItems: 'center' }} key={id}>
            <DayComp
              ...
            >
              {date}
            </DayComp>
          </View>
        </View>
      </TouchableOpacity>
  );
renderWeek(days, id) {
const week = [];
days.forEach((day, id2) => {
  week.push(this.renderDay(day, id2));
}, this);
  return (<View style={[this.style.home_week} key= 
{id}>{week}
  </View>);
 render() { ...}
 return( <View 
        ...calendar component
       </View>
 );

我正在修改 react-native-calendar 模块中的 calendar/index.js。我制作了像 iphone 日历一样的日历页面。如果我在 renderday 函数中单击视图 home_day，我希望显示模式页面..... setModalPage 函数运行良好，但模式页面没有显示。我该如何解决这个问题..？

编辑

我自己解决问题。我在 toggleCalendarModal 函数中添加了 {this.forceUpdate()}。

标签： javascriptreact-nativemodal-dialogreact-native-calendars