Блог

Я создаю приложение для напоминания о лекарствах для университетского проекта и использую тег Повестки дня из библиотеки календарей react-native. Вот как выглядит мое приложение прямо сейчас: 1

Я хотел бы добавить функцию, которая изменяет цвет каждого элемента в календаре при нажатии на него — по сути, чтобы подчеркнуть, что пользователь принял лекарство. (почти как список дел).

Я пытался реализовать эту функцию раньше, но она выделяла бы все элементы, а не по одному.

Ниже приведен текущий код без этой функции:

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



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={{'2012-05-22': [{name: '9 AM - One 200 mg Paracetamol '}],
                    '2012-05-23': [{name: '9 AM - One 200 mg Paracetamol'}, {name: '10 AM - One 500 mg Magnesium Tablet'}],
                    '2012-05-24': [{name: '9 AM - One 200 mg Paracetamol'}],
                    '2012-05-25': [{name: '9 AM - One 200 mg Paracetamol'}, {name: '10 AM - One 500 mg Magnesium Tablet'}]
                }}

                selected={'2012-05-22'}

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

}


renderItem(item) {
    return (
        <View style={styles.item} onPress={() => Alert.alert(item.name)}>
            <View>
                <Text>{item.name}</Text>
            </View>
            <TouchableOpacity
                onPress={() => Alert.alert(item.name)}
            />
        </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
},});
 

Я бы рекомендовал создать компонент под названием AgendaItem . Тогда AgendaItem у него может быть свое собственное toggled состояние, которое вы устанавливаете по щелчку мыши.

 class AgendaItem extends React.Component {
  state = {
    toggled: false
  }

  toggleSwitch() {
    this.setState({ toggled: !this.state.toggled });
  }

  render() {
    return (
      <View style={styles.item}>
          <View>
              <Text>{this.props.name}</Text>
          </View>
          <TouchableOpacity onPress={this.toggleSwitch} />
      </View>
    );
  }
}
 

Примечание: Вам нужно будет обновить стиль фона в зависимости от toggled состояния (я не показывал этого в приведенном выше коде).

Затем вы обновите renderItem функцию для визуализации AgendaItem компонента, передав данные элемента в качестве реквизитов. Например:

 renderItem(item) {
    return (
        <AgendaItem {...item} />
    );
}
 

Совет: Каждый раз, когда вы оказываетесь в ситуации, когда у вас есть «список вещей», и вы хотите, чтобы одна из этих вещей имела какое-то состояние, лучше сделать эту вещь своим собственным компонентом и заставить ее управлять своим собственным состоянием. Наличие состояния в родительском компоненте (как в вашем исходном примере) затрудняет это выполнение.