typescript - Victory Native - 在横轴上渲染标签

Question

胜利新手在这里，我需要在交叉轴上渲染一些标签，但我不明白如何。我可以在 y 轴上制作它，但我不明白如何在 x 轴上渲染它们。我真的没有得到关于它的文档。

也许我没有把我需要的所有道具都放在标签中。我尝试了如下所示，但没有任何反应

import React, {Component} from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';
import {VictoryBar, VictoryChart, VictoryTheme, VictoryAxis, VictoryLabel} from "victory-native";

const data = [
    {x_axis: 'Mon', earnings: 10},
    {x_axis: 'Tue', earnings: 15},
    {x_axis: 'Wed', earnings: 7},
    {x_axis: 'Thu', earnings: 10},
    {x_axis: 'Fri', earnings: 17},
    {x_axis: 'Sat', earnings: 20},
    {x_axis: 'Sun', earnings: 2},
];

    const sansSerif = "'Roboto', 'Helvetica Neue', Helvetica, sans-serif";
const letterSpacing = "normal";
const fontSize = 12;
const baseLabelStyles = {
    fontFamily: sansSerif,
    fontSize,
    letterSpacing,
    padding: 10,
    fill: 'red',
    stroke: "transparent"
};

const centeredLabelStyles = assign({textAnchor: "middle"}, baseLabelStyles);
export default class App extends Component {

    render() {

        return (
            <View style={styles.chart}>
                <VictoryChart
                    domainPadding={15}
                    theme={VictoryTheme.material}
                    width={Dimensions.get('window').width - 22}
                    padding={{left: 42, right: 42, top: 14, bottom: 0}}
                    height={200}
                >
                    <VictoryAxis
                        crossAxis={true}
                        tickValues={[1, 2, 3, 4, 5, 6, 7]}
                        tickLabelComponent={<VictoryLabel dx={20}/>}
                        style={{
                            axis: {stroke: null},
                            axisLabel: {
                                centeredLabelStyles
                            },
                            grid: {
                                fill: "none",
                                stroke: "none",
                                pointerEvents: "painted"
                            },
                            tickLabels: {baseLabelStyles}
                        }}
                    />
                    <VictoryBar
style={{
                            data: {fill: 'white', width: 12, strokeLinejoin: 'round'},
                            tickLabels: {baseLabelStyles},
                            labels: {baseLabelStyles}
                        }}

                        baseProps
                        cornerRadius={{top: 6, bottom: 6}}
                        data={data}
                        x='x_axis'
                        y='earnings'
                    />
                </VictoryChart>
            </View>
        );
    }
}

我需要的是在胜利栏的每个栏下方渲染每个 data.x_axis 字符串。这是我通过此配置得到的：