反應本機盒陰影解決方案的圖像

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

希望你拿個主意......