react-native注意事项，开发前必读文档

Posted 2021-08-17 欧阳呀

react-native各种不同点总结

• • 1. 平台区别
  • 2. 样式处理及不同点
  • 3. 特殊注意点

1. 平台区别

组件文件区别
index.js        -> index.rn.js
index.scss  -> index.rn.scss

路由页面区别 <请避免使用>
index.js    -> index.android.js   index.ios.js
index.scss  -> index.android.scss   index.ios.scss

scss 行rn忽略
/*postcss-pxtransform rn eject enable*/   
white-space: nowrap;
/*postcss-pxtransform rn eject disable*/

js 里特殊判断
process.env.TARO_ENV === "rn"

2. 样式处理及不同点

类型	例	修改	描述
transform	translate(-50%, 0)	@include eject()	RN不支持百分比
Tarnsition	Any	@include eject()	RN不支持
background	line-gradient	@include eject()	RN不支持渐变色背景
position	fixed	position:abslute;@include eject(position: fixed)	RN只有relative和absolute
-webkit-overflow-Scroll	any	@include eject()	RN不支持该属性
line-height	50%	改写成像素表示	CSS中数字类型表示行距倍数，RN中表示行距像素
box-shadow	spread	Box-shadow:1px 1px 24px #eee;@include eject(1px 1px 24px 0px #eee);	RN仅支持width height blur 不支持spread
font-family	multiple	避免使用	RN不支持多个字体类型设置
!important		如需使用，请使用@include eject($property, $value). 通过合理的类名，和sass预设，可以规避	RN不支持!Important 的写法
font-size	Inherit	改写成像素表示	RN的fontSize只支持数字，即逻辑像素
outline	any	@include eject()	RN不支持该属性
resize	any	@include eject()	RN不支持该属性
align-items	top	使用规范值	RN只支持flex-start flex-end center stretch baseline
box-sizing		使用padding时注意即可	RN是border-box，需要其他端兼容
flex-direction	默认值不同	使用同行多个元素时注意即可	RN默认方向为column，而web默认是row
color	rgb	非透明色尽量使用html形式，透明色使用rgba形式	rgb支持3个属性，如果传了第四个属性（即透明度），web自动忽略，RN中无法解析
组合选择器	any	避免使用	组合选择器不支持 sass中的组合选择器在转换成RN的时候会被忽略
margin重叠	any	@include eject()	纵向margin重叠，RN端不存在，不论是同级元素之间还是父子元素之间
display		None , flex
overflow		visible , hidden , scroll

3. 特殊注意点

类型	注意点	解决方案
View	不渲染的话，return null或者undefined不要return 空
View	字符串style backgroundImage不支持，需要差异化代码	RN中可以使用ImageBackground组件设置背景
View	内部不能直接使用字符串	字符串外部使用Text
storage	RN不支持同步的storage	不论是get还是set都是异步方法，推荐promise化使用
后代选择器	sass或者纯css中避免后代选择器，RN会直接忽略
Image	RN中Image需要显性指定宽高，无法自动获取	避免使用height: auto等方式设置
Image	设置mode	不设置可能导致图片变形或不如预期
组件参数	组件参数类型必须正确，number类型传字符串会报错	避免maxLength=“6”这样的写法，改成maxLength={6}
Taro.showLoadihng	需要手动调用Taro.hideLoading()隐藏	注意即可
Input	iOS无法输入中文	需要特殊封装，shouldComponentUpdate。【dq-Input已封装】
Picker	RN下直接使用可能会无法触发	需要在Picker子组件外部包裹一层DqTouchable组件
style属性	接受一个对象，不可以是字符串，flex的值应该是number
style属性	style内联样式Taro不会自动转换格式	使用utils/style.js -> formatStyle方法进行转换
Text内部	只能包裹Text或者Image组件，不能包含其他子组件，包括IconFont	IconFont本质上是SVG
独有样式分离	比如color，fontSize等Text独有样式，不写到View组件上
阻止触摸	e && e.stopPropagation && e.stopPropagation()
hooks
路由参数	组件里使用全局变量获取，例：global.routerParams	组件里获取不到this.$router.params

1. 如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我