Victory Native XL图表axisOption的font参数传入报错求助

在基于Expo SDK 50.0.11的React Native项目中，使用Victory Native的CartesianChart组件时，向axisOptions传入font参数会触发如下错误：

Error: Exception in HostFunction: Value is undefined, expected a number

实现逻辑为每个x值对应两个y轴柱状图，数据已正确获取。尝试过expo-font、@expo-google-fonts等多种字体方案，只要传入font参数就会触发该错误。相关代码如下：

import { useFont, LinearGradient, vec } from '@shopify/react-native-skia';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { View } from 'react-native';
import { BarGroup, CartesianChart } from 'victory-native';

import { appColors } from './appColors';

import inter from '../../../../../../assets/fonts/inter-medium.ttf';

interface CampaignSummary {
  campaignName: string;
  convertedLeadCount: number;
  totalLeadCount: number;
}

const LeadCampaignSummary = () => {
  const [data, setData] = useState<CampaignSummary[]>([]);

  // const [fontsLoaded] = useExpoFont({
  //   abelRegular: require('../../../../../../assets/fonts/abel-regular.ttf'),
  // });

  const font = useFont(inter, 12);

  useEffect(() => {
    const fetchCampaignSummary = async () => {
      try {
        const response = await axios.get(
          'lead-conversion-history',
        );
        setData(response.data);
      } catch (error) {
        console.log('Error fetching lead campaign summary:', error);
      }
    };

    fetchCampaignSummary();
  }, []);

  const campaignData = data.map((item: CampaignSummary) => ({
    campaignName: item.campaignName,
    convertedLeadCount: item.convertedLeadCount,
    totalLeadCount: item.totalLeadCount,
  }));

  return (
    <View style={{ height: 300, width: 300 }}>
      <CartesianChart
        data={campaignData}
        xKey="campaignName"
        yKeys={['convertedLeadCount', 'totalLeadCount']}
        domain={{ y: [0, 50] }}
        padding={{ left: 10, right: 10, bottom: 5, top: 15 }}
        domainPadding={{ left: 50, right: 50, top: 30 }}
        axisOptions={{
          font,
          tickCount: { y: 10, x: 5 },
          lineColor: '#d4d4d8',
          labelColor: appColors.text.light,
        }}
      >
        {({ points, chartBounds }) => (
          <BarGroup chartBounds={chartBounds} betweenGroupPadding={0.3} withinGroupPadding={0.1}>
            <BarGroup.Bar points={points.convertedLeadCount} animate={{ type: 'timing' }}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, 500)}
                colors={['#c084fc', '#7c3aed90']}
              />
            </BarGroup.Bar>
            <BarGroup.Bar points={points.totalLeadCount} animate={{ type: 'timing' }}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, 500)}
                colors={['#a5f3fc', '#0891b290']}
              />
            </BarGroup.Bar>
          </BarGroup>
        )}
      </CartesianChart>
    </View>
  );
};

export default LeadCampaignSummary;

原因分析 #

useFont钩子返回的字体对象在加载完成前是undefined，而Victory Native的axisOptions.font无法处理未加载完成的字体，导致类型匹配错误。

修复步骤 #

1. 等待字体加载完成再渲染图表
   添加加载状态判断，确保字体加载完成后再渲染CartesianChart组件，避免传入undefined值。

2. 修改后的代码示例

import { useFont, LinearGradient, vec } from '@shopify/react-native-skia';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { BarGroup, CartesianChart } from 'victory-native';

import { appColors } from './appColors';

import inter from '../../../../../../assets/fonts/inter-medium.ttf';

interface CampaignSummary {
  campaignName: string;
  convertedLeadCount: number;
  totalLeadCount: number;
}

const LeadCampaignSummary = () => {
  const [data, setData] = useState<CampaignSummary[]>([]);
  const font = useFont(inter, 12);

  useEffect(() => {
    const fetchCampaignSummary = async () => {
      try {
        const response = await axios.get('lead-conversion-history');
        setData(response.data);
      } catch (error) {
        console.log('Error fetching lead campaign summary:', error);
      }
    };

    fetchCampaignSummary();
  }, []);

  const campaignData = data.map((item: CampaignSummary) => ({
    campaignName: item.campaignName,
    convertedLeadCount: item.convertedLeadCount,
    totalLeadCount: item.totalLeadCount,
  }));

  // 等待字体加载完成
  if (!font) {
    return <ActivityIndicator color={appColors.text.light} />;
  }

  return (
    <View style={{ height: 300, width: 300 }}>
      <CartesianChart
        data={campaignData}
        xKey="campaignName"
        yKeys={['convertedLeadCount', 'totalLeadCount']}
        domain={{ y: [0, 50] }}
        padding={{ left: 10, right: 10, bottom: 5, top: 15 }}
        domainPadding={{ left: 50, right: 50, top: 30 }}
        axisOptions={{
          font,
          tickCount: { y: 10, x: 5 },
          lineColor: '#d4d4d8',
          labelColor: appColors.text.light,
        }}
      >
        {({ points, chartBounds }) => (
          <BarGroup chartBounds={chartBounds} betweenGroupPadding={0.3} withinGroupPadding={0.1}>
            <BarGroup.Bar points={points.convertedLeadCount} animate={{ type: 'timing' }}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, 500)}
                colors={['#c084fc', '#7c3aed90']}
              />
            </BarGroup.Bar>
            <BarGroup.Bar points={points.totalLeadCount} animate={{ type: 'timing' }}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, 500)}
                colors={['#a5f3fc', '#0891b290']}
              />
            </BarGroup.Bar>
          </BarGroup>
        )}
      </CartesianChart>
    </View>
  );
};

export default LeadCampaignSummary;

3. 额外验证点

• 确认字体文件路径正确，避免因路径错误导致字体加载失败
• 若使用expo-font方案，需确保已正确调用Font.loadAsync并等待所有字体加载完成后再渲染图表

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