按下添加到购物车按钮后如何在购物车屏幕中显示产品？

Question

我正在尝试在按添加到购物车按钮后使用增加、减少和删除按钮在购物车屏幕中显示我的产品，例如当我检查购物车屏幕时，我看到我添加的订单产品

我的上下文代码

const CartStateContext = createContext();
const CartDispatchContext = createContext();
const reducer = (state, action)=>{
switch(action.type){
    case 'ADD':
        return [...state,action.item]
    default:
        throw new Error(`unknow action.${action.type}`)}}

export const CartProvider =({children})=>{
const [state, dispatch] = useReducer(reducer,[])
return(
    <CartDispatchContext.Provider value={dispatch}>
    <CartStateContext.Provider value={state}>
        {children}
    </CartStateContext.Provider>
    </CartDispatchContext.Provider> )} 
 export const useCart = ()=>useContext(CartStateContext);
 export const useDispatch =()=> useContext(CartDispatchContext);

我的主页代码和添加到购物车按钮代码

const Home=({navigation})=>{
const items = useCart();
const dispatch = useDispatch();

const addToCart = (item)=>{
    dispatch({type:'ADD', item});
}
const renderItem=({item})=>{
       return(
            <View style={style.flatlist}>
                <Image
                source={item.photo}
                resizeMode="contain"
                style={style.image}
                />
                <View style={style.itemDetails}>
                <Text style={{fontSize:15, fontWeight:'bold', color:COLORS.primary, margin:5}}> 
                {item.name}</Text>
                <StarRating rating={4} reviews={99}/>
                <Text style={style.price}>RM{item.price}</Text>
                <TouchableOpacity
                onPress={()=>addToCart(item)}
                 style={{
                    marginTop:20,
                    wihth:"100%",height:'40%',
                    textAlign:'center', 
                    color:COLORS.black, 
                    backgroundColor:COLORS.primary,
                    borderRadius:10,
                    justifyContent:'center',
                }}>
                <Text style={{fontWeight:"bold", fontSize:20, color:COLORS.black,}}>Add To Cart</Text> 
                </TouchableOpacity>
              </View>
              </View>
             )
    }

return(
 <View style={{marginTop:-20, marginLeft:5}}>
             <Text style={{ fontSize:18, color:COLORS.primary, fontWeight:'bold'}}> Popular Orders</Text>
             </View>
             <FlatList 
             data={Data}
             renderItem={renderItem}
             />
             </View> 
             </View>
)

我的购物车屏幕为空

import {useCart} from '../components/Context';
  import {useDispatch} from '../components/Context';
  const Cart=({)=>{
    return(
        <View style={style.container}>
        <View>
                <View style={style.wrapped}>
                  <View style={style.imgContainer}>
                      <Image 
                      resizeMode="cover"
                      source={require('../assets/images/lamb.png')}
                      style={style.image}
                      />
                    </View>
                    <View style={style.titleContainer}>
                    <Text style={style.name}>laamb</Text>
                  
                    <Text style={style.name}>RM2000</Text>
                    </View>
                </View>
            </View>
            </View>
    )
}

所以请帮我怎么做