android - React native box shadow图像解决方案

Question

我正在尝试根据触摸状态为不同的图像添加样式。我正在努力寻找一种适用于 android 和 ios 的解决方案，为图像添加边框阴影。在网络上，我使用 box-shadow 来执行此操作，但该选项在 RN 上不起作用。到目前为止，我已经尝试过提升(不确定我是否正确使用它，因为它似乎没有做太多？)和 shadowColor 但都没有做我需要的事情

import React, { Component } from 'react';
import { TouchableWithoutFeedback, Image, Alert } from 'react-native';
import { View, Text } from 'native-base';

class Answer extends Component {

  render() {
    const { option, onClickCallback, isSelected, isBlurred } = this.props;

    const {
      cssUnSelected,
      cssSelected,
      cssBlurred,
      image
    } = styles;
    let mode = 'contain';

    let cssSelection = cssUnSelected;
    if (isSelected) {
      cssSelection = cssSelected;
    }
    if (isBlurred) {
      cssSelection = cssBlurred;
    }

    return (
      <View style={cssSelection}>
        <TouchableWithoutFeedback onPress={onClickCallback}>
          <Image source={require('../../assets/imgs/draw90.png')}
            resizeMode={mode}
            style={image} />
        </TouchableWithoutFeedback>
      </View>
    )
  }
}

const styles = {
  cssSelected: {
    borderRadius: 100,
    elevation: 90,
    shadowColor: "green"
  },
  cssUnSelected: {
    borderRadius: 100,
    elevation: 90,
    shadowColor: "blue"
  },
  cssBlurred: {
    elevation: 10,
    borderRadius: 100,
    opacity: 0.5,
    shadowColor: "red"
  },
  image: {
    flex: 1,
    marginLeft: "1%",
    marginRight: "1%",
    maxWidth: 90
  }
}

export default Answer;

Answer 1

由于各种原因，您缺少 View 中显示阴影所需的一些内容，例如 backgroundColor。此外，您需要提供其他阴影样式 Prop ，如 shadowOffset、shadowRadius 而非阴影颜色以在 IOS 中渲染阴影(因为默认值可能为 0或 null 或任何东西)。

对于 Android 遗憾的是，从 react-native v0.45 开始，您没有任何定制，您只能提供 elevation 样式 Prop 它在 View 底部为 android 版本 lollipop 及更高版本添加了阴影(您不能提供偏移量、阴影颜色或半径等)。

下面是一个小例子

import React, { Component } from 'react';
import { View, StyleSheet,Platform,Button } from 'react-native';

export default class App extends Component {
  state = {
    isSelected: false
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={this.state.isSelected ? styles.boxSelected : styles.boxUnselected} ></View>
        <Button title='toggle select' onPress={() => this.setState({isSelected: !this.state.isSelected}) } />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  boxSelected: {
    width:100,
    height:100,
    backgroundColor:'blue',
    borderRadius:10,
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0,0,0, .7)',
        shadowOffset: { height:0, width: 0 },
        shadowOpacity: 1,
        shadowRadius: 5,
      },
      android: {
        elevation: 5
      },
    }),
  },
  boxUnselected: {
    width:100,
    height:100,
    backgroundColor:'blue',
    borderRadius:10,
  }
});

零食演示 - https://snack.expo.io/r1fcX6_vb

希望你有一个想法...