吐槽
如果 React-Native 是个人, 我估计已经想要打死他了...
上一篇文章
当 React 开发者初次走进 React-Native 的世界
前言
最近因为业务需要, 做了一些关于 React-Native 方面的开发, 对一些自己遇到的问题做了记录. 总共 21 条要点记录, 承接于上一篇文章
本文讲的很多问题, 不一定是对的, 但确实是自己觉得可以引起一定的注意. 因为也是刚开始了解, 很多都不确定是否是最佳实践, 还请各位前辈多多指教.
正文
1. 对于背景, 可以使用 < backgroundImage > 组件
2. 字符串不写在 < Text > 组件里面会报错的, 比如写在 View 组件下面的话
3.web 中溢出时候有内部滚动条的 div, 在 RN 中则是对应使用 ScrollView 组件
4.Web 中我们使用 click 处理点击事件, 在 RN 中要用 Touchable 组件的 onPress 事件
5. 对于导航, 我们可以使用 React-Navigation.
其中导航我们有两种写法, 一种是单纯写成 React 的 props 函数调用的风格, 另外一种是写成 Redux 的风格, 就是通过 dispatch/action 的风格, 使用 Redux 风格, 是因为少部分场景可能会用到全局导航状态共享的需求, 对于多数简单的需求, 我觉得写成 React 的风格就好了, 因为简单易用
6. 对于切换类 tabs, 我们也许可以试试使用
但有一点非常遗憾: 这个组件对下划线的支持程度仍然无法满足普遍的业务需求 -- 自定义长度的居中下划线的切换
一般情况下, 设计师给我们的下划线不是占满满一个 tab 的, 而是只占一个 tab 的一部分长度, 比如 60%, 同时还要实现居中, 这时这个开源的 tab 模块就让我感到头疼了.
我也想过, react-native-scrollable-tab-view 中, 有一个叫做 tabBarUnderlineStyle 可以定义下划线的样式, 我们也许可以在这里实现长度为单 tab60% 的下划线居中的效果. 设置长度百分比, 配合 marginLeft 就可以了.
可是, 这样的话, 我们切换的时候, 平滑过渡的动画效果怎么实现? 模块没有提供可以切入的相关 props 啊, 实在没有办法, 我最终还是无奈得自己定义了一个. 当然了, 模块其实提供了另外一个方法, 可以切入 tab 渲染, 那就是 renderTabBar 这个 props, 但我仔细思考一番后, 发现: 这好像和我自己写一个工作量上没区别 emmmm.
如果大家有比较好的方案, 还请不吝提供一下, 谢谢.
7.borderRadius 不能用百分比了, 要用数值
8. flex 放心用吧! 不用再畏手畏脚了, 因为这里是移动端
9. 如果要获取某个组件在屏幕中的位置组, 可以利用组件布局完毕时触发的 onLayout 方法, 可以在这里获取组件的位置, 但令人遗憾的是, 这个方法是异步的, 异步的特征可能会与你的需求冲突, 如果每个组件的物理距离是确定的, 而非灵活变化的话, 是可以写死的 .
10.RN 使用动画的时候, 组件一定要使用专门的动画组件 Animated.View, 不然没有动画效果, 切记.
12. 除了动画和最近新增的 CSS 特性外, 我们原本在 Web 中能用的 CSS 属性大部分还是能用的. 当然实现肯定和我们理解的 "CSS" 不一样了, 下面是部分列表
- Flex
- Width
- htight
- margin
- Padding
- textAlign
- Overflow
- fontWeight
- Position
13. 动画类的 "CSS" 是全体不能用了, 你就忘了它们吧
14. 单纯依靠 Image 的 width:100% 或者 width: Dimensions.get('window').width, 可能无法实现图片匹配全屏宽度, 还需要设置 resizeMode: 'contain'
15. 接上 14, 除此你会发现, 图片的宽度变小了, 但是外层的 image 控件的高度可能还是没有变化, 因为它是开始就定死的, 不是动态变化的, 不是 "auto" 的, 所以还要另外结合图片比例和屏幕宽度, 进行设置
16. 组件设置为 position: absolute 后, 它的 index 是默认比其他组件要大的, 可能会遮盖其他组件, 这点要注意
17. Text 可以设置 border-radius, 但是它的圆角不会切割掉背景.(就是说, 虽然会出现 border,border 也是圆的, 但是 border 外部的) 所以, 关键的时候还是要用 View 组件去设置文字外部背景圆角
单纯用 Text 去切割圆角背景, 是切不出来的, boder 确实会有圆角, 但是无法切割边框
18. 似乎 RN 并不支持 boxSizing 属性, 按照我们在 Web 中的理解规则: 它默认指定的是类似 border-box 的行为, 也就是 width 是包含 border 的
19. 承接 20, 画圆的时候, borderRadius 是 width/height 的一半, 而不是 width 减去 borderWidth 的一半
20. 外层视图的 overflow: hidden 可能对内层视图没有作用, 还是会出现内层视图超出外层的情况
21.RN 带背景的 Text 自适应文字内容宽度的方法实现
在使用 RN 的文本的时候, 遇到了一件比较无语的事情, 就是我想写一个类似 "文本标签" 的样式, 就是一段可变长度的文本, 然后外面包裹一个长方形的背景, 当然是有圆角的那种. 然后呢, 我发现, 直接用 < Text > 标签包裹文本的话, Text 标签的背景颜色是会占满全屏的, 用 View 包裹也同样出现这种情况
那么, 怎么实现这种 "带背景的 Text 自适应文字内容宽度" 呢
实现
方式一: 双重 Text 法
- <Text style={{backgroundColor: 'transparent'}}>
- <Text style={{backgroundColor: 'red'}}>sss</Text>
- </Text>
- // 备注: 用这种 Text 法无法设置 padding!border-radius, 对于细节丰富的标签样式实现会有问题
方式二: flex-align 法
- <View style={{alignSelf: 'flex-start'}}>
- <Text>aaaaaa</Text>
- </View>
就能实现类似上面的效果
来源: https://www.cnblogs.com/penghuwan/p/11633547.html