Console Warning
Failed prop type: Invalid props.style key `fontize supplied to `Text`. Bad object: {
"width": "100%","height": 72,
"fontFamily": "OPPOSans, OPPOSans","fontWeight": "normal","fontize": "56px","color": "#304057","lineHeight": 72,"textAlign": "left","fontStyle": "normal"
Val... See More

这个警告是因为你在 Text 组件的样式中使用了无效的属性名 fontize。React Native 中设置字体大小的正确属性名是 fontSize,根据控制台警告信息，问题出在 Text 组件的 style 属性中， fontize 是一个无效的样式键（key）。正确的样式键应该是 fontSize ，而不是 fontize 。这是一个拼写错误。

‌问题分析：‌

控制台警告指出 fontize 是一个无效的样式键。正确的样式键应为 fontSize ，用于设置字体大小。由于拼写错误， fontSize 的样式可能未生效，导致文本的字体大小不符合预期。

• 错误属性名：fontize ❌
• 正确属性名：fontSize ✅

‌修正方案：‌

将你的样式对象中的 fontize: “56px” 改为 fontSize: 56：

const styles = {
  width: "100%",
  height: 72,
  fontFamily: "OPPOSans, OPPOSans",
  fontWeight: "normal",
  fontSize: 56,  // 修正这里
  color: "#304057",
  lineHeight: 72,
  textAlign: "left",
  fontStyle: "normal"
}

‌注意事项：‌

React Native 中的尺寸值通常使用数字而不是字符串（如 56 而不是 “56px”），确保所有样式属性名拼写正确，常见的易错属性包括：

• backgroundColor（不是 background-color）
• borderRadius（不是 border-radius）

样式对象需要正确导入和使用 StyleSheet，‌立即检查：‌ 现在就去你的代码中找到 fontize 这个拼写错误，改为 fontSize 并去掉 px 单位，这个警告就会消失。

---

在React或类似的前端框架中，当你看到这样的警告信息时，通常意味着你试图设置一个不存在的属性。在这个例子中，警告信息是：“Invalid props.style key fontize supplied”。这里的错误是fontize而不是font-size`。

解决方法

1. 检查属性名：确保你使用的是正确的CSS属性名。对于字体大小，应该使用fontSize而不是fontize。

2. 修改代码：将fontize改为fontSize。例如，如果你在JSX中这样写：

   <div style={{ fontize: '16px' }}>Hello</div>
   

   应该改为：

   <div style={{ fontSize: '16px' }}>Hello</div>
   

3. 使用CSS类：作为另一种方法，你也可以定义一个CSS类，然后在元素上使用这个类名，这样可以避免在JSX中直接使用样式对象。例如：

   /* 在你的CSS文件中 */
   .my-font-size {
       font-size: 16px;
   }
   

   <div className="my-font-size">Hello</div>
   

总结

确保你使用的CSS属性名是有效的，并且正确地拼写。在React中，style属性接受一个对象，其中键是CSS属性名（驼峰命名法），值是对应的值。如果你不确定某个属性是否有效，可以查阅相关文档或在浏览器中测试该属性是否能正确应用。这样可以避免类似的警告信息。

---

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。