React Native Progress组件进度值转换问题：输入10需对应10%进度

问题原因 #

react-native-progress的Progress.Pie组件对progress属性的要求是0到1之间的小数：0对应0%进度，1对应100%进度。你现在直接将输入的文本值（比如"10"）传入该属性，一是输入内容是字符串类型，二是数值10远大于组件要求的最大值1，所以组件无法正确解析成你想要的10%进度。

解决方案 #

需要将输入的百分比数值（如10、50、100）转换成0-1之间的小数，同时处理各种异常输入情况（比如非数字、负数、超过100的数值），确保最终传入progress的值始终在0-1范围内。

修改后的完整代码如下：

import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import * as Progress from 'react-native-progress';
import { useState } from 'react';

const Multiline = (props) => {
  return (
      <TextInput
      {...props}
       maxLength={100} />
  );
};
export default function App() {
  // 初始进度设为0，避免undefined导致的异常
  const [loading, setLoading] = useState(0);
  
  const handleTextChange = (text) => {
    // 将输入文本转为数字
    const inputNum = parseFloat(text);
    // 处理非数字输入，默认设为0
    let progress = isNaN(inputNum) ? 0 : inputNum / 100;
    // 确保进度值在0-1之间，超出范围的话取边界值
    progress = Math.max(0, Math.min(1, progress));
    setLoading(progress);
  };

  return (
    <View style={styles.container}>
    <Multiline 
    multiline
    onChangeText={handleTextChange}
    numberOfLines={20}
    style={{
    borderWidth: 1,
    borderColor: "magenta",
    borderRadius: 10,
  }}
   placeholder={"Please enter text! "}/>
      <Progress.Pie
        style={styles.circle}
        progress={loading}
        color={['magenta']}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { alignItems: 'center', flex: 1, justifyContent: 'space-around' },
  circle: { fill: 'transparent' },
});

关键修改点：

• 给useState设置初始值0，避免组件初始化时progress为undefined
• 新增handleTextChange函数，将输入的百分比数值除以100转换成组件要求的0-1小数范围
• 处理非数字、负数、大于100的输入，确保进度值始终合法

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