Как визуализировать тень?

Question

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

Answer 1

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

РЕАКТ Native вопрос, который отслеживает это:

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

Answer 2

Использование высоты для реализации теней на RN Android. Added elevation prop #27

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

Answer 3

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

(высота требуется для андроида, чтобы бросить тень на него)

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.

Answer 4

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

Answer 5

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

<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 
     } 
     }, 
    }) 

Answer 6

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

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

или вы можете использовать react-native-shadow для андроид

Answer 7

Все о полях

это работает в Android, но не проверить его на КСН

 
    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