Question

我想这样做：当用户选择日期时，将出现一个弹出模式，并且用户最多可以选择三个事件vacation, message, workout。例如，如果用户选择假期和消息，我希望日历中出现两个点。

到目前为止，当我选择一个日期时，我能够使弹出模式出现，但是我不知道如何使点出现在日历中。

这是我的代码：

const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key:'workout', color: 'green'};

export default class CalendarsScreen extends Component {
  initialState = {
     [_today]: {disabled: false}
 }

 constructor() {
   super();

   this.state = {
     _markedDates: this.initialState,
     isOpen: false,
     isDisabledOne: false,
     isDisabledTwo: false,
     isDisabledThree: false,
   }
 }



onDaySelect = (day) => {
     const _selectedDay = moment(day.dateString).format(_format);
     let selected = true;
     if (this.state._markedDates[_selectedDay]) {
       selected = !this.state._markedDates[_selectedDay].selected;
     }
     const updatedMarkedDates = {...this.state._markedDates, ...{ [_selectedDay]: { selected } } }
     this.setState({ _markedDates: updatedMarkedDates });
  } 

  render() {

    var BContent = <Button onPress={() => this.setState({isOpen: false})} style={[styles.btn, styles.btnModal]}>X</Button>;

    return (
      <View style={{flex: 1}}>

      <View style={styles.wrapper}>

        <Calendar
            minDate={_today}
            onDayPress={this.onDaySelect}
            markedDates={this.state._markedDates}
        />

      <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
        <Text style={styles.text}>vacation</Text>
        <Button onPress={() => this.setState({isDisabledOne: !this.state.isDisabledOne})} style={styles.btn}>({this.state.isDisabledOne ? "YES" : "NO"})</Button>
        <Text style={styles.text}>massage</Text>
        <Button onPress={() => this.setState({isDisabledTwo: !this.state.isDisabledTwo})} style={styles.btn}>({this.state.isDisabledTwo ? "YES" : "NO"})</Button>
        <Text style={styles.text}>workout</Text>
        <Button onPress={() => this.setState({isDisabledThree: !this.state.isDisabledThree})} style={styles.btn}>({this.state.isDisabledThree ? "YES" : "NO"})</Button>
      </Modal>

        </View>
      </View>
    );
  }
}

有人可以帮忙吗？任何建议或评论将不胜感激！

Answer 1

您需要将标记的日期添加到_markedDates对象中。在白天按显示模式，当用户单击x时，以点数组中的选定类型保存标记的日期。

state = {
  _markedDates: this.initialState,
  isOpen: false,
  isDisabledOne: false,
  isDisabledTwo: false,
  isDisabledThree: false,
  isOpen: false,
  selectedDay: ''
};

saveDay = () => {
  const dots = [];
  let selected = true;
  const {
    isDisabledOne,
    isDisabledTwo,
    isDisabledThree,
    _markedDates,
    selectedDay
  } = this.state;

  if (isDisabledOne) {
    dots.push(vacation);
  }

  if (isDisabledTwo) {
    dots.push(massage);
  }

  if (isDisabledThree) {
    dots.push(workout);
  }

  if (_markedDates[selectedDay]) {
    selected = !_markedDates[selectedDay].selected;
  }

  const clone = { ..._markedDates };

  clone[selectedDay] = { dots, selected };

  this.setState({
    isOpen: false,
    _markedDates: clone,
    isDisabledOne: false,
    isDisabledTwo: false,
    isDisabledThree: false,
  });
};


const BContent = () => (
  <Button
    title="X"
    onPress={this.saveDay}
    style={[styles.btn, styles.btnModal]}
  />
);

onDaySelect

onDaySelect = day => {
  const _selectedDay = moment(day.dateString).format(_format);

  this.setState({
    selectedDay: _selectedDay,
    isOpen: true
  });
};

DEMO

react-native-calendar：在弹出窗口中应用自定义多重标记

1 个答案: