React Native 新架构实战课
蒋宏伟
58 同城前端架构师,58RN 负责人
18214 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 42 讲
React Native 新架构实战课
15
15
1.0x
00:00/00:00
登录|注册

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
立即购买
登录 后留言

全部留言(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-14
    2
    11
  • AEPKILL
    请问该如何实现图文混排类似 float: left 这种效果?

    作者回复: React Native 没有 float 布局,是有 flex 布局,可以通过 flexDirection: 'row' 模拟类似图文左右布局的效果,但不能完全实现和 Web 一样的 float:left。

    2022-04-14
    1
  • 大神博士
    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-14
    2
  • 大神博士
    作业2: 方法1. 封装通用 Text 组件 方法2: 重写 Text 组件的 Render 方法
    2022-07-04
    2
  • Geek_e4a05b
    瀑布流目前开源的MasonryList使用的是Flatlist嵌套左右两个Flatlist方式。这种方式在数据变多快速滑动情况下白屏现象严重,请问老师有什么好的实现方式吗?
    2022-04-01
    2
    1
  • 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
收起评论
显示
设置
留言
17
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部