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

您缺少视频的 backgroundColor 等内容，因为各种原因需要显示阴影。此外，您需要提供其他阴影样式道具，如 shadowOffset ， shadowRadius ，而不是阴影颜色，以便在 IOS 中渲染阴影（因为默认值可能为0）或null或任何东西）。

对于 Android ，遗憾的是，您没有反应原生 v0.45 的任何自定义，您只能提供提升样式道具，在Android版棒棒糖及以上的视图底部添加阴影（您不能提供偏移，阴影颜色或半径等）。

下面是一个小工作示例

int snprintf ( char * s, size_t n, const char * format, ... );
int vsnprintf (char * s, size_t n, const char * format, va_list arg );

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

希望你有个主意......

Answer 2

只需将<Image>组件包装在<View>组件中。并设置<View>而不是<Image>

的样式

为图像反应原生的盒子阴影解决方案

2 个答案: