React Native 对接BLE数据的实时LineChart折线图不显示问题

核心错误点 #

• 折线图入参格式完全错误：当前给LineChart传入的data值为[service]即BLE服务实例对象数组，所有React Native生态的折线图库，data字段仅接受纯数值数组（如[20, 65, 120, 240]）或带x/y坐标的结构化点位数组，原始BLE服务对象没有可被图表解析的数值维度，无法触发绘制。
• 数据链路不通：BLE实时数值的解析逻辑全部封装在ServiceCard及下层的CharacteristicCard组件内部，页面层的LineChart组件完全拿不到解析后的有效传感器数值，没有绘图数据源。
• 缺少必要配置与布局约束：当前LineChart为空标签，未搭配网格、坐标轴等基础子组件；放在ScrollView容器内也未设置明确宽度，容易出现布局尺寸计算为0导致组件不挂载的问题。
• 无实时更新逻辑：就算数据格式正确，当前传入的是静态service对象，不会随着BLE推送的新数据触发组件重渲染，无法实现实时滚动的折线效果。

修复步骤 #

1. 页面层新增独立的图表数据状态，控制数据长度避免性能问题

// 页面组件顶部声明状态，最多保留最近50个数据点
const [chartData, setChartData] = useState<number[]>([]);

2. 定义BLE新值的回调方法，透传给下层数据解析组件

const handleNewBLEValue = useCallback((parsedValue: number) => {
  setChartData(prev => {
    const updated = [...prev, parsedValue];
    // 截断超长数据，避免数组无限增长导致UI卡顿
    return updated.slice(-50);
  })
}, []);

// 渲染ServiceCard时传入回调
<ServiceCard service={service} onNewValue={handleNewBLEValue} />

在ServiceCard组件的props类型中补充onNewValue: (value: number) => void定义，逐层将回调传递到负责解析BLE特征值的CharacteristicCard组件中，每次监听到特征值推送、解析出有效数值时，调用onNewValue(解析后的数值)将数据同步到页面层状态。
3. 修正折线图配置，补全必要属性

{/* 有有效数据时再渲染图表，避免空数据报错 */}
{chartData.length > 0 && (
  <LineChart
    style={{ height: 200, width: '100%' }}
    gridMin={0}
    gridMax={300}
    data={chartData}
    svg={{ stroke: 'rgb(134, 65, 244)', strokeWidth: 2 }}
    contentInset={{ top: 20, bottom: 20, left: 15, right: 15 }}
  >
    <Grid />
    <YAxis
      contentInset={{ top: 20, bottom: 20 }}
      svg={{ fontSize: 10, fill: 'grey' }}
    />
  </LineChart>
)}

4. 补充清理逻辑：页面卸载时移除BLE特征值的监听，避免后台持续接收数据造成内存泄漏。

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