1

我正在使用 React Native 和 Expo 创建一个药物提醒和日历应用程序。我正在使用 react-native-calendars 库并实现“议程”组件来获取每周日历视图，如以下屏幕截图所示。

如上所示，我的问题是，当我单击一个复选框时，它会变成红色（勾选）所有复选框，而不仅仅是该特定项目的复选框 - 即它不像正常的待办事项列表那样起作用。

以下是我的完整源代码：

export default class App extends React.Component {
state = {
    toggled: false,
    items: {},
    toggleColor: true
}

changeCheckBox() {
    const newState = !this.state.toggleColor;
    this.setState({toggleColor:newState})
}

toggleSwitch = (value) => {
    this.setState({toggled: value})
}

render() {
    return (
        <View style={styles.background}>
            <View style={styles.medicationHeaderContainer}>
                <Text style={styles.medicationHeader}> Medication </Text>
            </View>
            <View style={styles.reminderAlertContainer}>
                <Text style={styles.reminderAlertText}> Reminders </Text>
                <Switch
                    onValueChange={this.toggleSwitch}
                    value={this.state.toggled}
                    style={styles.reminderAlertSwitch}/>
            </View>
            <Agenda
                items={this.state.items}
                loadItemsForMonth={this.loadItems.bind(this)}
                selected={'2021-04-02'}

                renderItem={this.renderItem.bind(this)}
            />
        </View>
    );

}

loadItems(day) {
    setTimeout(() => {
        for (let i = -15; i < 85; i++) {
            const time = day.timestamp + i * 24 * 60 * 60 * 1000;
            const strTime = this.timeToString(time);
            if (!this.state.items[strTime]) {
                this.state.items[strTime] = [];
                const numItems = Math.floor(Math.random() * 3 + 1);
                for (let j = 0; j < numItems; j++) {
                    this.state.items[strTime].push({
                        name: 'Item for ' + strTime + ' #' + j,
                        height: Math.max(50, Math.floor(Math.random() * 150))
                    });
                }
            }
        }
        const newItems = {};
        Object.keys(this.state.items).forEach(key => {
            newItems[key] = this.state.items[key];
        });
        this.setState({
            items: newItems
        });
    }, 1000);
}

timeToString(time) {
    const date = new Date(time);
    return date.toISOString().split('T')[0];
}

renderItem(item) {
    const {toggleColor} = this.state;
    const checkBoxColor = toggleColor ?"white":"#F56868FF";
    return (
        <View style={styles.item} onPress={() => Alert.alert(item.name)}>
            <View>
                <Text>{item.name}</Text>
            </View>
            <TouchableOpacity
                onPress={() => this.changeCheckBox()}
                style={{
                    borderWidth: 0.5,
                    width: 20,
                    height: 20,
                    borderRadius: 10,
                    marginLeft: 250,
                    justifyContent: 'center',
                    alignContent: 'center',
                    marginTop: -5,
                    backgroundColor: checkBoxColor
                }}/>
        </View>
    );
}}

const styles = StyleSheet.create({
background: {
    flex: 1,
    backgroundColor: "#fff"
},
medicationHeaderContainer: {
    marginTop: 40,
    height: "10%",
    backgroundColor: "#fff"
},
medicationHeader: {
    fontSize: 40,
    bottom: -30,
    fontWeight: "bold",
    marginLeft: 15
},

reminderAlertContainer: {
    marginTop: 5,
    height: '7%',
    width: '95%',
    backgroundColor: "#85C1E9",
    borderBottomStartRadius: 10,
    borderBottomEndRadius: 10,
    borderTopStartRadius: 10,
    borderTopEndRadius: 10,
    marginLeft: 10
},
reminderAlertText: {
    fontSize: 30,
    bottom: -10,
    marginLeft: 15,
    color: '#fff',
    fontWeight: "bold",
},
reminderAlertSwitch: {
    bottom: 20,
    marginLeft: 320
},

item: {
    backgroundColor: 'white',
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17
},
emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30
},});
4

0 回答 0