React Native使用react-countdown报错：Text字符串需在<Text>组件内渲染

报错原因 #

react-countdown组件默认会直接输出纯文本格式的倒计时内容，而React Native的规则是所有文本类型的内容必须嵌套在<Text>组件内部，直接在<View>下渲染纯文本就会触发这个错误。

解决方法 #

方法一：自定义渲染函数（推荐，灵活性更高） #

通过renderer属性自定义倒计时的渲染逻辑，将内容包裹在<Text>组件中，还能自由控制样式和状态提示：

return (
  <View style={{ flex: 1 }}>
    <Countdown
      date={Date.now() + 5000}
      renderer={({ hours, minutes, seconds, completed }) => {
        if (completed) {
          // 倒计时结束时的提示
          return <Text style={{ fontSize: 16, color: 'green' }}>倒计时结束</Text>;
        } else {
          // 格式化显示倒计时
          const formattedSeconds = seconds.toString().padStart(2, '0');
          return <Text style={{ fontSize: 20 }}>{`${minutes}:${formattedSeconds}`}</Text>;
        }
      }}
    />
  </View>
);

方法二：直接用<Text>包裹Countdown组件（快速解决） #

如果不需要自定义内容，直接把Countdown组件嵌套在<Text>里即可：

return (
  <View style={{ flex: 1 }}>
    <Text>
      <Countdown date={Date.now() + 5000} />
    </Text>
  </View>
);

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