03|Style:关于样式你需要知道的三件事
蒋宏伟
你好,我是蒋宏伟。
上一讲我们说到,搭建页面的第一步是搭建静态页面,拿到设计稿后要从上往下拆成组件,再从下往上把组件进行实现。
但组件只是页面的架子。如果你不使用任何样式,组件只能遵循默认的布局规则、默认字号颜色,铺在屏幕上,看起来就像调试的 log 信息一样,也没有什么体验可言。
俗话说人靠衣装、佛靠金装,页面体验要好就离不开样式的帮助。大家对 App 的第一印象,就是对页面样式的第一印象。虽说样式设计上是由设计师负责,但最终落地还得靠代码。如何把设计师给的设计稿在不同大小的机型上还原实现,通过验收,是工作中实实在在要面对的考验。
还原设计稿还只是最基本的要求,作为开发者,你还得要关心开发成本、可维护性、布局性能等事情。比如,有哪些样式库可以节约开发成本?代码量大了需求有变动,样式怎么改起来更方便?React Native 的布局性能究竟怎样,多层嵌套的复杂布局会不会导致性能问题?
所以今天,围绕着上面这些话题,我和你一起聊聊,关于样式你需要知道的三件事:
React Native 组件样式都有哪些?
React Native 的 Flex 布局有哪些特点?
React Native 样式代码如何管理?
组件样式 = 通用样式 + “私有”样式
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了React Native样式的重要知识点,包括组件样式构成、Flex布局特点和样式代码管理方法。首先,讨论了React Native组件样式的构成,包括通用样式和私有样式的继承关系,以及不同组件支持的样式属性。其次,详细介绍了Flex布局的特点,强调了其在React Native中的重要性。最后,提及了React Native样式代码的管理方法,包括通过TypeScript声明文件和规则记忆等方式来提高开发效率。文章通过实例代码展示了Flex布局的三种常见应用场景,帮助读者快速了解React Native样式的基本概念和应用要点。整体而言,本文内容丰富,适合开发者快速掌握React Native样式的核心知识。文章还提到了样式学习材料和作业,为读者提供了进一步学习和实践的机会。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Native 新架构实战课》,新⼈⾸单¥59
《React Native 新架构实战课》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(17)
- 最新
- 精选
- AEPKILL设置 Text 默认样式之前我们用的非常 hack 的方案,是这样写的: ```tsx // fix: 安卓 Text 组件的文字会被截断 // issue: https://github.com/facebook/react-native/issues/15114 if (RN.Platform.OS === 'android') { const defaultFontFamily = { fontFamily: '', // fix: 部分安卓机器上的主题会设置系统字体颜色为白色 color: '#000', }; const OldTextRender = (RN.Text as any).render; (RN.Text as any).render = (props: any, ref: any) => { const {style} = props; return OldTextRender( { ...props, style: RN.StyleSheet.compose(defaultFontFamily, style), }, ref ); }; } ```
作者回复: 正确答案👍 这种方案确实是 hack,但好用。
2022-04-14211 - AEPKILL请问该如何实现图文混排类似 float: left 这种效果?
作者回复: React Native 没有 float 布局,是有 flex 布局,可以通过 flexDirection: 'row' 模拟类似图文左右布局的效果,但不能完全实现和 Web 一样的 float:left。
2022-04-141 - 大神博士includeFontPadding: false, textAlignVertical: 'center', 这是说的android 字体居中的问题的处理吗
作者回复: 是的
2022-05-24 - Archer_Shu设计部门如果缺失开发背景,设计的组件属性不统一(比如文字标题使用多种字体和颜色),导致更多时候只能使用绝对定位。开发和QA也因此难以使用可复用的样式。最终也就导致了代码的冗长以及难以维护。
作者回复: 关键看业务 toB 的好复用,toC 的不好复用。
2022-04-26 - yuxizhe请问 Text 组件设置全局默认样式,一般是用组件进行封装,相当于每个Text都会重新调用 StyleSheet 来生成样式,会有性能问题么?
作者回复: 现在的计算机处理能力很强,类似这种很小的运算逻辑,它都不会带来性能的问题。
2022-04-16 - hawksun写样式的时候怎么处理不同机型适配的问题呢?
作者回复: RN 很少有机型适配问题,一般遇到了再解决。常见的适配问题是厂商反馈的折叠屏问题。
2022-04-142 - 大神博士作业2: 方法1. 封装通用 Text 组件 方法2: 重写 Text 组件的 Render 方法2022-07-042
- Geek_e4a05b瀑布流目前开源的MasonryList使用的是Flatlist嵌套左右两个Flatlist方式。这种方式在数据变多快速滑动情况下白屏现象严重,请问老师有什么好的实现方式吗?2022-04-0121
- Geek_cf32ac使用 React Native 提供的 "Text.defaultProps" 属性。这个属性允许设置 Text 组件的默认属性,包括样式。 import { Text } from 'react-native'; Text.defaultProps = Text.defaultProps || {}; Text.defaultProps.style = { fontFamily: 'Arial', fontSize: 16 };2023-06-06归属地:上海
- 风会停息老师您好,我想问下,RN的原理不是相当于说 用JS描述ui然后底层其实是映射的原生api去实现的吗,原生的api再去进行渲染绘制,也就是说最后运行的时候Android还是绘制的原生View 使用Android的引擎 ios也一样用ios的引擎,那么为什么还说React Native 的布局引擎 Yoga, 是 Android、iOS 通用的,如何做到的呢?2023-02-21归属地:上海1
收起评论