不变式冲突：文本字符串必须在<Text>组件内呈现

Question

我只是试图重构一些代码并创建一个可重用的按钮。我收到此错误，不知道问题是什么，当我将其与其他可重复使用的组件进行比较时，它看起来完全一样。

可重用组件：

const CustomButton = (props) => {
  return (
    <TouchableOpacity
      style={styles.buttonStyle}
      onPress={props.onPress}
    >
      <Text>{props.text}</Text>
    </TouchableOpacity>
  );
};

然后我在如下的render方法中调用它：

<View>
      <Text>Due Date:</Text>
       <CustomButton
          text={'Next Class'}
       />
</View>