react-native-chart-kit中BarChart组件无法居中的问题求助

禁用withHorizontalLabels后，组件并不会自动移除为水平标签预留的空间，这就是导致图表无法居中的核心原因。结合你的代码，可以通过以下两种方式解决：

1. 用容器View实现全局居中 #

给BarChart套一层View，利用flex布局让图表在水平方向居中，同时保留你设置的宽度：

<View style={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}>
  <BarChart
    // 你的原有props
    width={Dimensions.get("window").width - 100}
    height={220}
    withHorizontalLabels={false}
    // 其他配置不变
    style={{
      marginVertical: 10,
      borderRadius: 10,
    }}
  />
</View>

2. 移除残留的内边距 #

禁用水平标签后，组件默认仍会保留左右内边距，手动清除这些内边距再配合alignSelf: 'center'也能实现居中：

<BarChart
  // 你的原有props
  width={Dimensions.get("window").width - 100}
  height={220}
  withHorizontalLabels={false}
  // 其他配置不变
  style={{
    marginVertical: 10,
    borderRadius: 10,
    paddingLeft: 0,
    paddingRight: 0,
    alignSelf: 'center'
  }}
/>

完整修改后的代码示例 #

import { View, Dimensions } from 'react-native';
import { BarChart } from 'react-native-chart-kit';

// 此处导入或定义你的dark、accent变量

<View style={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}>
  <BarChart
    data={{
      labels: ["SU", "MO", "TU", "WE", "TH", "FR", "SA"],
      datasets: [
        {
          data: [
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
          ],
        },
      ],
    }}
    width={Dimensions.get("window").width - 100}
    height={220}
    withHorizontalLabels={false}
    fromZero={true}
    withInnerLines={false}
    chartConfig={{
      backgroundGradientFrom: dark.backgroundColor,
      backgroundGradientTo: dark.backgroundColor,
      decimalPlaces: 0,
      fillShadowGradientFrom: accent,
      fillShadowGradientTo: accent,
      fillShadowGradientFromOpacity: 1,
      fillShadowGradientToOpacity: 0.25,
      barPercentage: 0.75,
      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    }}
    style={{
      marginVertical: 10,
      borderRadius: 10,
      paddingLeft: 0,
      paddingRight: 0,
    }}
  />
</View>

这样处理后，图表就能在父容器中水平居中，同时消除禁用水平标签后残留的空白空间。

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