[ 卡卡 DAY 31 ] - React Native 跨平台的 Shadow 处理

Shadow in React Native 原来有这门学问。
在专案中，遇到卡牌的阴影问题，以为可以使用 css3 中的 box-shadow 属性，结果发现设定後，没效果啊～！接着又发现双平台的显示竟然没有统一，所以31天接续纪录一下，就是写这篇的原因了~ :P

Platform

首先你要先知道，react native 有个很平易近人的跨平台装置判断，请看下面这篇：
[ 卡卡 DAY 8 ] - React Native 跨平台装置判断

当学会判断平台之後...，以下就知道是怎麽一回事了

import {
  StyleSheet,
  Platform
} from 'react-native';



const styles = StyleSheet.create({
  cardShadow: {
    ...Platform.select({
      ios: {
        // ios style
      },
      android: {
        // android style
      }
    })
  },
});

style 实作

iOS

    shadowColor: '#aaa',  
    // 阴影的颜色
    shadowOffset:{width:0,height:0},  
    // xy轴为基准，设定阴影的偏移，width = x轴,height ＝ y轴
    shadowOpacity: 1,
    // 阴影的透明度
    shadowRadius: 1.5,  
    // 设置阴影晕染半径

android

    elevation:1.5,
    // 支援 android5.0 以上
    // 无法指定阴影的颜色以及偏移，只能设阴影高度，阴影效果主要在底部
    // elevation 是只有 Android-only style property 使用在 View elements

code

import {
  StyleSheet,
  Platform
} from 'react-native';

//.....code....//

const styles = StyleSheet.create({
  cardShadow: {
    ...Platform.select({
      ios: {
        shadowColor: '#aaa',  
        shadowOffset:{width:0,height:0},  
        shadowOpacity: 1,
        shadowRadius: 1.5,  
      },
      android: {
         elevation:1.5,
      }
    })
  },
});

结论

结果...你会发现，其实两个装置的样式写法根本就不一样，所以不需要做平台判断直接合并写即可。

import {
  StyleSheet
} from 'react-native';

//.....code....//

const styles = StyleSheet.create({
  cardShadow: {
    shadowColor: '#aaa',  
    shadowOffset:{width:0,height:0},  
    shadowOpacity: 1,
    shadowRadius: 1.5,  
    elevation:1.5,
  },
});