React Native Calendars:如何使用 Redux 仅更改一项的背景颜色 [英] React Native Calendars : How to change the background color of only one item using Redux

问题描述

我正在尝试更改此议程中仅一个项目的背景，但使用我的代码，当我单击一个项目时，它会更改所有项目的背景颜色，而不仅仅是我单击的项目:点击前 点击后.我还想将我的状态值存储在 redux 中，这样我就可以在应用程序的其他地方显示屏幕，同时保留绿色.

I'm trying to change the background of only one item in this agenda but with my code, when I click on an item, it changes the background color of all of them and not just the one I clicked : Before clicked after clicked. I want also to store the value of my state in redux so that I can display the screen elsewhere in my application while conserving the green color.

这是我日历中的代码:

import React, {useState, useCallback, useEffect} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
} from 'react-native';
import { useSelector, useDispatch } from "react-redux";
import { Avatar, Card } from 'react-native-paper';
import {Agenda} from "react-native-calendars";
import { toggleActive} from "../store/actions/calendar";
import * as firebase from "firebase";

const activeItemText = 'Réservé';
const activeItemStyles = {
    backgroundColor: 'lightgreen',
    backgroundColor2: 'white',
};
const inactiveItemText = 'Disponible';
const inactiveItemStyles = {
    backgroundColorPrimary: 'white',
    backgroundColorSecondary: 'white',
};

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

const CalendarItem = ({item, firstItemInDay}) => {
  //  const [active, setActive] = useState(false);
    const dispatch = useDispatch();

    const active = useSelector(state => state.calendar.active);

    const toggleActiveHandler = useCallback(() => {
        dispatch(toggleActive())
    }, [dispatch]);




   // const [active1, setActive1] =  React.useState(false);

  //  console.log(active);
   /* const changeColor = () => {
       setActive(!active)
    };
    */

    return (
        <TouchableOpacity
            style={{marginTop: 17, marginRight: 10}}
            onPress={toggleActiveHandler}>
            <Card style={active ? activeItemStyles : inactiveItemStyles}>
                <Card.Content>
                    <View
                        style={{
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                        }}>
                        <Text>{active ? activeItemText : inactiveItemText}</Text>
                        <Avatar.Text label="J" />
                    </View>
                </Card.Content>
            </Card>
        </TouchableOpacity>
    );
};

const renderItem = (item, firstItemInDay) => {
    return <CalendarItem item={item} firstItemInDay={firstItemInDay} />;
};

const calendarScreen = () => {
    const [items, setItems] = useState({});

    const loadItems = (day) => {
        setTimeout(() => {
            for (let i = -15; i < 85; i++) {
                const time = day.timestamp + i * 24 * 60 * 60 * 1000;
                const strTime = timeToString(time);

                if (!items[strTime]) {
                    items[strTime] = [];
                    const numItems = 1;
                    for (let j = 0; j < numItems; j++) {
                        items[strTime].push({
                            name: inactiveItemStyles.texte,
                            height: Math.max(50, Math.floor(Math.random() * 150)),
                        });
                    }
                }
            }
            const newItems = {};
            Object.keys(items).forEach((key) => {
                newItems[key] = items[key];
            });
            setItems(newItems);
        }, 1000);
    };

    return (
        <View style={{flex: 1}}>
            <Agenda
                items={items}
                loadItemsForMonth={loadItems}
                selected={'2020-09-23'}
                renderItem={renderItem}
            />
        </View>
    );
};

export default calendarScreen;

这是我的减速器:

import { TOGGLE_ACTIVE } from "../actions/calendar";


const initialState = {
    active: false
};


const calendarReducer = (state = initialState, action) => {
    switch (action.type) {
        case TOGGLE_ACTIVE :
            console.log(state);
            console.log(!!state);
            return {
                active: !!state};
        default:
            return state
    }
};

export default calendarReducer;

这是我的行动:

export const TOGGLE_ACTIVE = 'TOGGLE_ACTIVE';

export const toggleActive = () => {
    return    { type: TOGGLE_ACTIVE }
};

非常感谢您的帮助！

推荐答案

您只是在保存活动状态，这就是为什么所有背景都在变化.因为，它无法区分您更改了哪个 state .因此，请从您单击的项目中保留一些独特的数据，以便将其与其他项目进行比较.如果 redux 数据匹配，则更改背景，否则不会.

You are just saving active state, that's why its changing background for all. Cause, it can't differentiate for which you have changed the state . So, keep some unique data from the item that you have clicked to compare it with others. If the redux data match change background otherwise not.

这篇关于React Native Calendars:如何使用 Redux 仅更改一项的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！