Возникли некоторые проблемы со стилем в React Native с тенями.

Я хотел бы получить тень только на изображении с изогнутыми краями (не квадратом) с заданным мной пограничным радиусом. Но если я применяю тень к родительскому представлению, оно не может «следовать за краями» изображения. Я бы хотел, чтобы тень была вокруг изогнутых краев изображения, а не вокруг квадратного вида.

enter image description here

Вот мой код:

  <View style={[styles.closedcontainer]}>
    <Image source={{uri: props.food.url}}
           style={styles.smallimage}
      />
  </View>

А вот мой стиль:

const styles = StyleSheet.create({
  closedcontainer: {
      height: 100,
      width: 100,
      flexDirection: 'row',
      flexWrap: 'wrap',
      paddingLeft: 50,
      paddingRight: 50,
      paddingBottom: 0,
      paddingTop: 0,
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#fff9f9',
    shadowColor: 'black',
    shadowOffset: {width: 2, height: 5},
    shadowOpacity: .30,
    shadowRadius: 5,
    // overflow: 'hidden'
  },
  smallimage: {
      height: 100,
      width: 100,
      borderRadius: 30,
      borderColor: "#f97070",
      borderWidth: 2.75,
      margin: 10,
      backgroundColor: 'white',
      resizeMode: 'contain'
  }

Я подумал, что, возможно, добавление переполнения, скрытого к стилю родительского представления (closedcontainer), сделает это, но это полностью скрывает всю тень.

enter image description here

Любые идеи? Благодарность!

ОБНОВЛЕНИЕ: согласно предложению, попытался установить borderRadius непосредственно в, к сожалению, все еще не повезло. введите описание изображения здесь

3
SpicyClubSauce 11 Мар 2018 в 02:25

1 ответ

Лучший ответ

Попробуйте установить borderRadius непосредственно в качестве опоры изображения, а не используйте его как стиль.

<Image borderRadius={25}/>

Или похожие

2
sfratini 11 Мар 2018 в 07:35