元素顺序变更时React Native Maps的Marker pinColor属性不更新问题

我编写了如下列表组件：

import React from 'react';
import { Marker } from 'react-native-maps';
import { useSelector, useDispatch } from 'react-redux';
import { selectPin } from '../reducers/pinReducer';

const Markers = () => {
    const dispatch = useDispatch();
    const pinsAvailable = useSelector(state => state.pin.allTheAvailablePins);

    return (
        <>
            {pinsAvailable.map((pin, index) => {
                console.log(index === 0) // 当index为0时返回true
                return <Marker 
                key={pin.id} 
                coordinate={pin.coords}
                pinColor={index === 0 ? "red" : "green"} // 但此处逻辑不生效
                onPress={() => dispatch(selectPin({pin}))} />
            })}
        </>
    )
}

export default Markers;

初始加载时pinsAvailable获取pin对象数组，渲染正常。仅修改列表元素顺序、无新增或删除元素时，渲染不符合预期。
问题表现：首次渲染时列表首项的pinColor属性为红色，其余为绿色；列表重排后所有Marker的pinColor都变为绿色。调试确认index === 0判断能正常返回true，仅修改列表顺序就出现该问题，想知道问题原因。

补充说明 #

我在代码中调用fetchRoute方法拉取重排后的pin列表，代码如下：

export const fetchRoute = async (dispatch, location) => {
    if(location){
        const res = await axios.get(`http://192.168.1.98:3000/api/sevkiyat/rotayiciz?lat=${location.latitude}&lon=${location.longitude}`);
        dispatch(setAllThePinsAvailable({pins: res.data.orderedDeliveries})); // orderedDeliveries为重排后的pin数组
        dispatch(setRoutePath({routePath: res.data.lines}));
    }
}

Redux Toolkit的slice代码 #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
    selectedPin: null,
    deliveryToBeArrived: null,
    allTheAvailablePins: [],
    fetchPinsLoading: true,
    fetchPinsError: null,
}

export const pinSlice = createSlice({
    name: 'pin',
    initialState,
    reducers: {
        unselectPin: (state) => {
            state.selectedPin = null;
        },
        selectPin: (state, action) => {
            state.selectedPin = action.payload.pin;
        },
        startDeliveryToBeArrived: (state, action) => {
            state.deliveryToBeArrived = action.payload.delivery;
        },
        abortDeliveryToBeArrived: (state) => {
            state.deliveryToBeArrived = null;
        },
        setAllThePinsAvailable: (state, action) => {
            state.allTheAvailablePins = action.payload.pins;
            state.fetchPinsLoading = false;
        },
        setFetchPinsError: (state, action) => {
            state.fetchPinsError = action.payload.error;
        }
    },
})

export const { setAllThePinsAvailable, selectPin, unselectPin, startDeliveryToBeArrived } = pinSlice.actions

export default pinSlice.reducer;

项目主store配置代码 #

import { configureStore } from '@reduxjs/toolkit';
import locationReducer from '../reducers/locationReducer';
import modalReducer from '../reducers/modalReducer';
import pinReducer from '../reducers/pinReducer';
import routeReducer from '../reducers/routeReducer';
import sampleReducer from '../reducers/sampleReducer'

export const store = configureStore({
    reducer: {
        sample: sampleReducer,
        pin: pinReducer,
        location: locationReducer,
        modal: modalReducer,
        route: routeReducer,
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware({
        serializableCheck: false
    })
})

问题修复方案 #

后续更新：将pinColor的颜色名替换为十六进制颜色值后问题修复，该问题根源为react-native-maps库对颜色名的兼容问题。

内容的提问来源于stack exchange，提问作者GreyGoat93