React Native中如何让TextInput输入值为数值类型？

React Native 的 TextInput 组件无论设置何种键盘类型，输入返回的内容始终是字符串类型，所以需要手动将输入内容转换为数值类型，同时还要处理组件 value 属性的类型匹配问题，以下是具体的修改方案：

核心修改点 #

1. 将输入字符串转换为数值：在更新状态时，把输入的文本转成数字（整数或浮点数），同时处理空输入的边界情况。
2. 统一 value 属性类型：TextInput 的 value 必须是字符串，所以需要把数值状态转为字符串后传入。

修改后的完整代码 #

const [fabricLength, setFabricLength] = useState(0);

<View style={styles.InputContainer}>
  <Text>S Fabric Length</Text>
  <TextInput
    value={fabricLength.toString()} // 数值转字符串，匹配TextInput要求
    onChangeText={(text) => {
      // 处理空输入，转为0；非空则转为浮点数
      const numericValue = text ? parseFloat(text) : 0;
      setFabricLength(numericValue);
    }}
    placeholder="Enter Fabric Length"
    keyboardType="number-pad"
    style={styles.textInput}
  />
</View>

进阶优化（可选） #

如果需要限制输入为整数，或者避免非法字符（比如多个小数点），可以加入输入过滤逻辑：

<TextInput
  value={fabricLength.toString()}
  onChangeText={(text) => {
    // 只保留数字和单个小数点
    const filteredText = text.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    // 转换为数值，空输入则设为0
    const numericValue = filteredText ? parseFloat(filteredText) : 0;
    setFabricLength(numericValue);
  }}
  placeholder="Enter Fabric Length"
  keyboardType="number-pad"
  style={styles.textInput}
/>

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