点击更改颜色 - react-native

Question

我正在为一个大学项目创建一个药物提醒应用程序，并且我正在使用 react-native-calendars 库中的 Agenda 标签。 这就是我的应用现在的样子：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
},});

Answer 1

我建议创建一个名为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} />
    );
}

提示：任何时候，当你有一个“事物列表”并且你希望其中一个事物具有某种状态时，最好将那个事物作为自己的组件并让它管理它自己的状态。在父组件中拥有状态（就像在您的原始示例中一样）很难做到。