一、核心知识点：长度换算器 完整核心用法

1. 用到的纯内置组件与 API

所有能力均为 RN 原生自带，零基础易理解、易复用，无任何额外依赖：

二、双向实时换算 + 一键清空 + 输入校验

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';

const filterNumber = (text: string): string => {
  return text.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
};

const LengthConverterBusiness = () => {
  const [meter, setMeter] = useState<string>('');
  const [cm, setCm] = useState<string>('');
  const [mm, setMm] = useState<string>('');

  const handleMeterChange = (text: string) => {
    const filtered = filterNumber(text);
    setMeter(filtered);
    if (!filtered) {
      setCm('');
      setMm('');
      return;
    }
    const num = parseFloat(filtered);
    setCm((num * 100).toString());
    setMm((num * 1000).toString());
  };

  const handleCmChange = (text: string) => {
    const filtered = filterNumber(text);
    setCm(filtered);
    if (!filtered) {
      setMeter('');
      setMm('');
      return;
    }
    const num = parseFloat(filtered);
    setMeter((num / 100).toString());
    setMm((num * 10).toString());
  };

  const handleMmChange = (text: string) => {
    const filtered = filterNumber(text);
    setMm(filtered);
    if (!filtered) {
      setMeter('');
      setCm('');
      return;
    }
    const num = parseFloat(filtered);
    setMeter((num / 1000).toString());
    setCm((num / 10).toString());
  };

  // 一键清空所有输入框
  const handleClearAll = () => {
    setMeter('');
    setCm('');
    setMm('');
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>通用长度换算器</Text>
      <Text style={styles.subTitle}>米(m) / 厘米(cm) / 毫米(mm)</Text>

      <View style={styles.inputGroup}>
        {/* 米输入框 */}
        <View style={styles.inputItem}>
          <TextInput
            style={styles.input}
            placeholder="请输入米数"
            keyboardType="numeric"
            value={meter}
            onChangeText={handleMeterChange}
            placeholderTextColor="#999"
          />
          <Text style={styles.unit}>米(m)</Text>
        </View>

        {/* 厘米输入框 */}
        <View style={styles.inputItem}>
          <TextInput
            style={styles.input}
            placeholder="请输入厘米数"
            keyboardType="numeric"
            value={cm}
            onChangeText={handleCmChange}
            placeholderTextColor="#999"
          />
          <Text style={styles.unit}>厘米(cm)</Text>
        </View>

        {/* 毫米输入框 */}
        <View style={styles.inputItem}>
          <TextInput
            style={styles.input}
            placeholder="请输入毫米数"
            keyboardType="numeric"
            value={mm}
            onChangeText={handleMmChange}
            placeholderTextColor="#999"
          />
          <Text style={styles.unit}>毫米(mm)</Text>
        </View>
      </View>

      {/* 清空按钮 */}
      <TouchableOpacity style={styles.clearBtn} onPress={handleClearAll}>
        <Text style={styles.clearBtnText}>一键清空</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

// 鸿蒙端业务样式（贴合鸿蒙设计规范）
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f7f8fa',
  },
  title: {
    fontSize: 22,
    color: '#333',
    textAlign: 'center',
    marginBottom: 8,
    fontWeight: '600',
  },
  subTitle: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
    marginBottom: 30,
  },
  inputGroup: {
    gap: 15,
    marginBottom: 25,
  },
  inputItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 12,
    paddingHorizontal: 18,
    height: 52,
    borderWidth: 1,
    borderColor: '#e5e5e5',
  },
  input: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  unit: {
    fontSize: 16,
    color: '#666',
    marginLeft: 10,
  },
  clearBtn: {
    backgroundColor: '#007DFF',
    borderRadius: 12,
    height: 52,
    justifyContent: 'center',
    alignItems: 'center',
  },
  clearBtnText: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '500',
  },
});

export default LengthConverterBusiness;

三、OpenHarmony6.0 专属避坑指南

以下是鸿蒙 RN 开发中实现长度换算器的真实高频踩坑点，解决方案简单直接，全部真机实测验证通过，彻底规避功能异常和样式错乱：

四、扩展用法：长度换算器 功能升级技巧

基于本次的基础版本，可轻松扩展更多实用功能，适配更复杂的业务场景，全部为纯内置 API 实现：

1. 增加更多长度单位

添加分米 (dm)、千米 (km) 等单位，只需扩展换算公式和输入框状态，例如：

// 千米与米的换算：1km = 1000m
const handleKmChange = (text: string) => {
  const filtered = filterNumber(text);
  setKm(filtered);
  if (!filtered) { setMeter(''); return; }
  setMeter((parseFloat(filtered) * 1000).toString());
};

2. 限制小数位数

通过 toFixed(n) 限制换算结果的小数位数，避免超长小数，提升用户体验：

// 保留2位小数
setCm((num * 100).toFixed(2));

3. 增加换算历史记录

使用 useState 管理历史记录数组，每次换算时保存结果，实现历史记录的展示和清空：

const [history, setHistory] = useState<string[]>([]);
// 换算时添加记录
const addHistory = (m: string, c: string, mm: string) => {
  setHistory([`${m}m = ${c}cm = ${mm}mm`, ...history]);
};

4. 持久化存储历史记录

结合 AsyncStorage 将历史记录保存到本地，APP 重启后依然保留，实现数据持久化：

// 保存记录
await AsyncStorage.setItem('length_history', JSON.stringify(history));
// 读取记录
const savedHistory = await AsyncStorage.getItem('length_history');
if (savedHistory) setHistory(JSON.parse(savedHistory));

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net