首页 > 解决方案 > React Native:如何触发 noOfDays 次 howOften 警报?

问题描述

在我的代码中,警报安排得很好,我也可以从 ReactNativeAN.getScheduledAlarms() 中看到它们。但是他们被解雇了 noOfDays 次。理想情况下,他们应该被解雇 noOfDays * howOften。例子

import ReactNativeAN from 'react-native-alarm-notification';

export default class AddDropForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date(),
            mode: 'date',
            show: false,
            alarmComponent: [],
            isDatePickerVisible: false,
            time: new Date(),
            dayPickerShow: false,
            oftenPickerShow: false,
            taperPickerShow: false,
            noOfDays: 1,
            howOften: 5,
            taper: 1,
            isLeftSelected: false,
            isRightSelected: false,
            isBothSelected: false,
            timeArray: []
        }
    }

    updateNoOfDays = (count) => {
        this.setState({ noOfDays: count })
    }
    updateHowOften = (count) => {
        this.setState({ howOften: count })
    }
    updateTaper = (count) => {
        this.setState({ taper: count })
    }

    showDatePicker = () => {
        this.setState({ isDatePickerVisible: true })
    };

    hideDatePicker = () => {
        this.setState({ isDatePickerVisible: false })
    };

    handleConfirm = (date) => {
        console.log("A date has been picked: ", date);
        this.setState({ timeArray: [...this.state.timeArray, date] })
        this.setState({ time: date })
        this.hideDatePicker();
    };

    async setAlarm(name) {
        let setTime = ''
        for (let i = 0; i < this.state.noOfDays; i++) {
            this.state.timeArray.forEach(async t => {
                let alarmData = {
                    title: `${name}`,
                    message: `Reminder for ${name}`,
                    channel: "uuidv4()",
                    schedule_type: "repeat",
                    small_icon: "ic_launcher",
                    auto_cancel: true,
                    has_button: true
                };
                setTime = moment(t).set({ second: 0, millisecond: 0 }).add(i, 'days').format('DD-MM-yyyy HH:mm:ss')
                await ReactNativeAN.scheduleAlarm({ ...alarmData, fire_date: setTime });
            })
        }
        Alert.alert('Alarms Set')
    }

    render() {
        const { dropName } = this.props.route.params
        let array = []
        for (let i = 1; i <= this.state.howOften; i++) {
            array.push(
                <View style={{ flex: 7 }}>
                    <Button title={"Set Time"} onPress={() => this.showDatePicker()} />
                    <DateTimePickerModal
                        isVisible={this.state.isDatePickerVisible}
                        mode="time"
                        onConfirm={this.handleConfirm}
                        onCancel={this.hideDatePicker}
                    />
                </View>
            )
        }
        return (
            <View style={styles.container}>
               
                <View style={styles.tilesContainer}>
                    <View style={{ flex: 7 }}>
                        <DatePicker
                            style={{ width: '100%' }}
                            date={this.state.date}
                            mode="date"
                            placeholder="select date"
                            format="YYYY-MM-DD"
                            minDate={new Date()}
                            confirmBtnText="Confirm"
                            cancelBtnText="Cancel"
                            customStyles={{
                                dateIcon: {
                                    position: 'absolute',
                                    left: 0,
                                    top: 4,
                                    marginLeft: 0
                                },
                                dateInput: {
                                    marginLeft: 36
                                }
                            }}
                            onDateChange={(date) => { this.setState({ date: date }) }}
                        />
                    </View>
                </View>
                <View style={styles.tilesContainer}>
                    <View style={{ flex: 2 }}>
                        <Text style={styles.subTitle}>Number of Days?</Text>
                    </View>
                    <View style={{ flex: 7 }}>
                        <Picker selectedValue={this.state.noOfDays} onValueChange={this.updateNoOfDays}>
                            ...
                        </Picker>
                    </View>
                </View>
                <View style={styles.tilesContainer}>
                    <View style={{ flex: 2 }}>
                        <Text style={styles.subTitle}>How Often?</Text>
                    </View>
                    <View style={{ flex: 7 }}>
                        <Picker selectedValue={this.state.howOften} onValueChange={this.updateHowOften}>
                            ...
                        </Picker>
                    </View>
                </View>
                
                <View style={styles.tilesContainer}>
                    <View style={{ flex: 2 }}>
                        <Text style={styles.subTitle}>Alarm</Text>
                    </View>
                    {array}
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <View style={{ width: 260 }}>
                        <Button title={"Add"} color='#57E874' onPress={() => this.setAlarm(dropName.name)} />
                    </View>

                </View>
            </View>
        )
    }
}

标签: javascriptreactjsreact-native

解决方案


推荐阅读