最近在做react native相关的项目,有遇到关于ios和android方面的样式兼容问题,遂想自己遇到的难点bug记录下来
关于层级的zIndex/elevation
1.zIndex是rn在0.30开始支持的属性,是可以生效的;
2.shadow和elevation
shadow
(阴影)开头的样式现在可以在iOS上应用,但在安卓中是不生效的.- 而Android上对应的属性是
elevationelevation
。
设置elevation属性就等价于使用原生的elevation API,因而也有同样的限制(比如最明显的就是需要Android 5.0以上版本)。此外还会影响到层叠
对于Android,两个同一层级的定位组件(position:“absolute”)
情况 | 在z轴的层叠关系 |
---|---|
既没有ZIndex属性,又没有elevation 属性 | 由其摆放位置决定的,放在下面的组件会在上层 |
两个组件只有zIndex没有elevation属性时 | zIndex大的在上层 |
两个组件有elevation属性 | elevation大的在上层 |
两个组件既有zIndex属性elevation属性 | 以elevation为准 |
注:对于IOS,同层级的组件,z轴的层叠关系只与摆放顺序与zIndex有关,与elevation无关
eg:<View style = {styles.tooBar}></View>
设置阴影:
ios:
.tooBar{
shadowOffset: { width: 0, height: 3 },
shadowColor: 'black',
shadowOpacity: 1,
shadowRadius: 3,
}
android:
.tooBar{
elevation: 10
}