Вопрос:

Как я могу сделать тень?

javascript react-native

73141 просмотра

7 ответа

494 Репутация автора

Как сделать тень на виде? Я пробовал много комбинаций shadowColor, shadowOffset, shadowOpacity и shadowRadius, которые, похоже, ничего не делают. Я уверен, что стиль применяется правильно, так как другие атрибуты, которые я установил, работают.

Автор: user2503846 Источник Размещён: 28.03.2015 10:50

Ответы (7)


13 плюса

1162 Репутация автора

Решение

Похоже, что это ошибка в React native, которая shadowOpacityустановлена ​​в тип, CGFloatа не в floatсоответствии с CALayer doc . использовать iPhone 5 симулятор, прежде чем он будет исправлен. ( CGFloatнаходится floatв старых устройствах.)

Проблема React Native, которая отслеживает это:

https://github.com/facebook/react-native/issues/449

Автор: wangii Размещён: 29.03.2015 10:26

29 плюса

831 Репутация автора

Используйте высоту для реализации теней на RN Android. Добавлена ​​высота опоры № 27

<View elevation={5}> </View>

Автор: Karthick Kumar Размещён: 14.03.2016 06:48

77 плюса

9741 Репутация автора

Я использую React-Native 0.40 и ниже код работает для меня как на IOS, так и на Android.

(Только для Android) Устанавливает высоту вида с помощью базового API для повышения прав Android. Это добавляет тень к элементу и влияет на z-порядок перекрывающихся видов. Поддерживается только на Android 5.0+, не влияет на более ранние версии.

 class MainApp extends Component {
  render() {
    return (
      <View style={styles.container}>

        <View elevation={5} style={styles.buttonContainer}>
          <Text style={styles.textStyle}>Shadow Applied</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  textStyle: {
    color: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
  }
})

Проверено на iPhone.

введите описание изображения здесь

редактировать

Комментарий от @ James. Благодарю.

Примечание: для тех, кто на Android, backgroundColor имеет решающее значение . Я использовал View как контейнер для другого элемента и не смог получить тень, пока не указал цвет фона.

Автор: Ashok R Размещён: 12.01.2017 02:27

12 плюса

488 Репутация автора

    viewStyle : {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    marginBottom: 10,
    elevation: 2,
    position: 'relative'
},

Используйте marginBottom: 10

Автор: Viktor Bogutskii Размещён: 25.05.2017 05:40

11 плюса

149 Репутация автора

Вы должны дать высоту опору для просмотра

<View elevation={5} style={styles.container}>
   <Text>Hello World !</Text>
 </View>

стили могут быть добавлены так:

 const styles = StyleSheet.create({

     container:{
        padding:20,
        backgroundColor:'#d9d9d9',
        shadowColor: "#000000",
        shadowOpacity: 0.8,
        shadowRadius: 2,
        shadowOffset: {
          height: 1,
          width: 1
        }
       },
   })
Автор: Saurabh Joshi Размещён: 08.06.2017 02:50

8 плюса

237 Репутация автора

  panel: {
    // ios
    backgroundColor: '#03A9F4',
    alignItems: 'center', 
    shadowOffset: {width: 0, height: 13}, 
    shadowOpacity: 0.3,
    shadowRadius: 6,

    // android (Android +5.0)
    elevation: 3,
  }

или вы можете использовать Reaction-native-shadow для Android

Автор: Umino San Размещён: 09.10.2017 06:52

6 плюса

61 Репутация автора

Все о полях

это работает в Android, но не проверял в ios

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { View, Platform } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'

const styles = EStyleSheet.create({
    wrapper: {
        margin: '-1.4rem'
    },
    shadow: {
        padding: '1.4rem',
        margin: '1.4rem',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: 'transparent',
        ...Platform.select({
            ios: {
                shadowColor: 'rgba(0,0,0, 0.4)',
                shadowOffset: { height: 1, width: 1 },
                shadowOpacity: 0.7,
                shadowRadius: '1.4rem'
            },
            android: {
                elevation: '1.4rem'
            }
        })
    },
    container: {
        padding: 10,
        margin: '-1.4rem',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#Fff',
        backgroundColor: '#fff'
    }
})

class ShadowWrapper extends PureComponent {
    static propTypes = {
        children: PropTypes.oneOfType([
            PropTypes.element,
            PropTypes.node,
            PropTypes.arrayOf(PropTypes.element)
        ]).isRequired
    }

    render () {
        return (
            View style={styles.wrapper}
                View style={styles.shadow}
                    View style={styles.container}
                        {this.props.children}
                    View
                View
            View
        )
    }
}

export default ShadowWrapper
Автор: Denis Zaytsev Размещён: 21.12.2017 09:42
Вопросы из категории :
32x32