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

结果附在屏幕截图中

https://user-images.githubusercontent.com/14028306/60788321-0a283500-a17a-11e9-841d-5604982783ac.jpg

Answer 1

以您的elevation样式增加View参数将增加android设备上盒子阴影的半径：

https://snack.expo.io/S1NK7dxbr

顺便说一句，在嵌套的View组件中，borderWidth作为样式列出了两次。

Answer 2

您可以使用react native盒阴影生成器进行最佳实践。

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

Answer 3

  

请将此示例用于react-native中的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',
  }

});