BoxShadow в реакции-родной

Question

Я пытаюсь создать рамку-тень вокруг вида в реактивной версии 0.59.9

Я попробовал 'shadowOffSet' и все свойства тени, но без использования

import React, { Component } from 'react';
import { Text, View, StyleSheet, PixelRatio } from 'react-native';

const styles = {
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
    },
}

export default class Card extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{
            borderWidth: 1,
            borderRadius: 20,
            borderColor: '#ddd',
            borderBottomWidth: 0,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.8,
            shadowRadius: 20,
            borderWidth: (1 / PixelRatio.getPixelSizeForLayoutSize(1)),
            elevation: 1,
            justifyContent: 'center',
            alignItems: 'center',
            overflow: this.props.overflow ? this.props.overflow : 'hidden',
            width: 120,
            height: 150}}>
              <Text>Mine</Text>
        </View>
      </View>
    );
  }
}

Результат прикреплен как скриншот

Answer 1

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

https://ethercreative.github.io/react-native-shadow-generator/

Answer 2

пожалуйста, используйте этот пример для boxShow в реагировать на родной

import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.buttonStyles}>
          <Text style={styles.welcome}>Welcome to React Native!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  buttonStyles: {
    backgroundColor: '#f2f2f2',
    paddingVertical: 10,
    width: '60%',
    borderRadius: 10,
    shadowColor: 'black',
    shadowOpacity: 0.9,
    elevation: 10,
  },
  welcome: {
    fontSize: 20,
    alignSelf: 'center',
  }

});

Answer 3

Увеличение параметра elevation в вашем стиле View приведет к увеличению радиуса тени на устройствах с Android:

https://snack.expo.io/S1NK7dxbr

Кроме того, у вас есть borderWidthуказан дважды как стиль в вашем вложенном View компоненте.