React Native Gifted Charts：如何调整数据点标签使其不超出屏幕？

我使用React Native Gifted Charts的折线图组件展示随时间变化的数据，为最大值和最小值添加了数据标签，但当标签位于屏幕边缘时会发生重叠，导致无法正常读取。我无法仅通过首尾索引来调整标签位置——倒数第二、倒数第三等位置的标签也会超出屏幕边缘，且数据点数量可变，硬编码值完全不可行。

我曾尝试将标签设为透明状态，通过handleLayout测量数据点标签的位置后保存到Redux中：

export const DataPointLabelComponentLayoutSetter = (value: number, isMax: boolean, currencyType: string) => {
    const handleLayout = (event: LayoutChangeEvent) => {
        event.persist(); // 防止事件被复用
        event.currentTarget?.measure((x, y, width, height, pageX, pageY) => {
            if (isMax === true) {
                store.dispatch(setCoinGraphDataLabelPropsMax({ x, y, width, height, pageX, pageY, value, isMax }));
            } else if (isMax === false) {
                store.dispatch(setCoinGraphDataLabelPropsMin({ x, y, width, height, pageX, pageY, value, isMax }));
            }
        });
    };

    return (
        <View style={[styles.labelContainer, { opacity: 0 }]} onLayout={handleLayout}>
            {!isMax && <MaterialIcons name="keyboard-arrow-up" color="white" size={10} />}
            <Text style={styles.labelText}>{convertToCurrencyFormat(value, currencyType)}</Text>
            {isMax && <MaterialIcons name="keyboard-arrow-down" color="white" size={10} />}
        </View>
    );
};

随后将该位置传递给顶部的二级标签，试图调整其位置以远离屏幕边缘，但这个方案存在bug：标签位置有时无法更新（推测与Redux状态更新机制有关），且整体实现方式过于繁琐。现寻求更可行的解决办法。

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