[山东大学软件学院项目实训个人博客12]React Native实现身体指标数据可视化与录入

原创已于 2025-06-16 12:03:05 修改 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android studio #react native #前端

于 2025-06-16 11:34:38 首次发布

前言

在健康管理类应用中，身体指标数据的可视化展示和便捷录入是核心功能。本文将详细介绍如何使用React Native构建一个完整的身体指标管理系统，包含数据图表展示和多指标录入功能，帮助用户直观了解健康趋势。

一、技术栈与功能概述

1.1 核心技术栈

React Native：跨平台移动应用框架
react-native-chart-kit：数据可视化图表库
React Navigation：页面导航管理
AsyncStorage：本地数据存储
TypeScript：类型安全检查

1.2 主要功能

指标趋势可视化：折线图展示血糖、血压、体重变化
多指标录入：表单式数据输入
历史数据查询：按日期查看记录
数据持久化：本地缓存+远程同步

二、图表可视化实现

2.1 图表库选择与集成

使用react-native-chart-kit实现折线图：

yarn add react-native-chart-kit
yarn add react-native-svg  # 依赖

2.2 数据准备与格式化

将API返回的数据转换为图表需要的格式：

const prepareChartData = (metricKey: string) => {
  const validEntries = metricsHistory
    .filter(entry => entry[metricKey] !== undefined);

  return {
    labels: validEntries.map(entry => 
      new Date(entry.date).toLocaleDateString('zh-CN', {month: 'short', day: 'numeric'})
    ),
    datasets: [{
      data: validEntries.map(entry => entry[metricKey]),
      color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
      strokeWidth: 2
    }]
  };
};

2.3 多图表实现

展示四种关键健康指标：

// 空腹血糖图表
<LineChart
  data={prepareChartData('fbg')}
  width={screenWidth - 32}
  height={220}
  yAxisSuffix=" mmol/L"
  chartConfig={chartConfig}
/>

// 血压图表（合并收缩压和舒张压）
<LineChart
  data={{
    ...prepareChartData('sbp'),
    datasets: [
      ...prepareChartData('sbp').datasets,
      ...prepareChartData('dbp').datasets.map(d => ({
        ...d,
        color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`
      }))
    ]
  }}
  yAxisSuffix=" mmHg"
/>

2.4 图表样式定制

const chartConfig = {
  backgroundColor: '#ffffff',
  backgroundGradientFrom: '#ffffff',
  backgroundGradientTo: '#ffffff',
  decimalPlaces: 1,
  color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
  propsForDots: {
    r: '4',
    strokeWidth: '2',
    stroke: '#ffa726'
  }
};

三、指标录入功能实现

3.1 表单设计

使用ScrollView容纳多个输入项：

<ScrollView contentContainerStyle={styles.wrapper}>
  <InputRow label="空腹血糖（mmol/L）" value={fastingGlucose} onChange={setFastingGlucose} />
  <InputRow label="收缩压（mmHg）" value={systolicBP} onChange={setSystolicBP} />
  {/* 其他输入项... */}
</ScrollView>

3.2 输入组件封装

复用输入组件保持一致性：

const InputRow = ({ label, value, onChange }) => (
  <>
    <Text style={styles.label}>{label}</Text>
    <TextInput
      style={styles.input}
      value={value}
      onChangeText={onChange}
      keyboardType="numeric"
    />
  </>
);

3.3 数据提交

验证并提交数据到后端：

const handleSubmit = async () => {
  const payload = {
    userId: await AsyncStorage.getItem('userId'),
    date: new Date().toISOString().split('T')[0],
    fbg: parseFloat(fastingGlucose) || undefined,
    sbp: parseFloat(systolicBP) || undefined,
    // 其他字段...
  };

  if (!payload.fbg && !payload.sbp /* && 其他字段验证 */) {
    Alert.alert('提示', '请至少填写一项指标');
    return;
  }

  try {
    await saveBodyMetrics(payload);
    Alert.alert('成功', '指标已保存！');
    navigation.goBack();
  } catch (err) {
    Alert.alert('保存失败', err.message);
  }
};

四、技术难点与解决方案

4.1 多图表性能优化

问题：同时渲染多个图表可能导致性能下降
解决方案：

使用FlatList懒加载图表
按需渲染（初始只渲染1个，其他滑动时加载）
降低图表复杂度（减少数据点）

<FlatList
  data={['fbg', 'pbg', 'bp', 'weight']}
  renderItem={({item}) => (
    <View style={styles.chartContainer}>
      <Text style={styles.chartTitle}>{getChartTitle(item)}</Text>
      <LineChart data={prepareChartData(item)} {...chartProps} />
    </View>
  )}
/>

4.2 血压双线图表

问题：需要在同一图表显示收缩压和舒张压
解决方案：合并两个数据集

datasets: [
  ...prepareChartData('sbp').datasets,
  ...prepareChartData('dbp').datasets.map(d => ({
    ...d,
    color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`
  }))
]

4.3 表单键盘遮挡

问题：键盘弹出遮挡输入框
解决方案：

使用KeyboardAvoidingView
手动滚动到当前输入项

<KeyboardAvoidingView 
  behavior="padding"
  style={{flex: 1}}
>
  <ScrollView 
    ref={scrollRef}
    onContentSizeChange={() => scrollRef.current?.scrollToEnd()}
  >
    {/* 表单内容 */}
  </ScrollView>
</KeyboardAvoidingView>

五、完整代码解析

5.1 图表展示页面核心代码

const BodyMetricsScreen = () => {
  const [metricsHistory, setMetricsHistory] = useState<any[]>([]);
  
  const loadMetrics = async () => {
    const history = await getUserBodyMetrics('userId');
    setMetricsHistory(history);
  };

  useEffect(() => { loadMetrics(); }, []);

  return (
    <ScrollView>
      {['fbg', 'pbg', 'bp', 'weight'].map(metric => (
        <View key={metric}>
          <Text style={styles.chartTitle}>{getChartTitle(metric)}</Text>
          <LineChart
            data={prepareChartData(metric)}
            width={screenWidth - 32}
            height={220}
            chartConfig={chartConfig}
          />
        </View>
      ))}
    </ScrollView>
  );
};

5.2 数据录入页面核心代码

const BodyMetricsSubmitScreen = () => {
  const [formData, setFormData] = useState({
    fbg: '', sbp: '', dbp: '', weight: ''
  });

  const handleSubmit = async () => {
    const payload = {
      ...formData,
      userId: await AsyncStorage.getItem('userId'),
      date: new Date().toISOString().split('T')[0]
    };
    
    await saveBodyMetrics(payload);
    navigation.goBack();
  };

  return (
    <ImageBackground source={require('../assets/back.png')}>
      <ScrollView>
        {Object.entries(formData).map(([key, value]) => (
          <InputRow
            key={key}
            label={LABELS[key]}
            value={value}
            onChange={(text) => setFormData({...formData, [key]: text})}
          />
        ))}
        <Button title="保存" onPress={handleSubmit} />
      </ScrollView>
    </ImageBackground>
  );
};