React Native计时器组件代码运行报错 无法定位错误原因

报错核心原因 #

React Native 有强制渲染规则：所有文本字符串必须包裹在<Text>（或<TextInput>等官方文本类组件）内部，不允许在组件树中直接放置未被文本组件包裹的裸字符串，你的代码触发报错就是因为违反了这条规则。

具体问题点 #

• 你在多个组件闭合标签的相邻位置写了独立的{" "}空格字符串，这些字符串没有被<Text>组件包裹，属于非法的裸文本节点，是运行时报错的直接诱因。
• 额外功能缺陷：Reset 按钮没有绑定对应的重置逻辑回调，修复报错后点击不会有响应，不属于本次运行报错的原因，但需要后续补全。
• 你使用插入空格字符串的方式控制组件间距是错误实现思路，RN 中组件间距应该通过样式的margin、padding属性控制，插入空格不仅不符合规范，渲染间距也不可控。

修复后可运行代码 #

<View style={styles.container}>
  <Text style={styles.textStyle}>
    {Math.floor(time/60).toString().padStart(2,"0") + ":" + 
    (time % 60).toString().padStart(2,"0")}
  </Text>
</View>
<View style={styles.containerbtn}>
  <TouchableOpacity style={styles.buttonStyle} onPress={()=>startTimer()}>
    <Text style={styles.buttonText}>Start</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.buttonStyle} onPress={()=>resetTimer()}>
    <Text style={styles.buttonText}>Reset</Text>
  </TouchableOpacity>
</View>

注意事项 #

• 不要把Web端React的开发习惯直接套用到React Native：Web环境下DOM支持直接插入文本节点、空白字符，但RN的渲染宿主是移动端原生组件，没有全局文本节点的支持，只要检测到未被文本组件包裹的字符串就会直接抛出渲染错误。
• 组件内的文本前后多余的空格可以直接删掉，RN的<Text>组件会自动处理内容内的正常排版，不需要额外插空格做间隔。

内容的提问来源于stack exchange，提问作者muhammad bin ashraf