反应本机盒阴影解决方案的图像

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版本增加阴影棒棒糖及以上（你不能提供胶印，阴影颜色或半径等）。

下面是一个小的工作示例

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

希望你拿个主意......