react-native - 反应原生中的 BoxShadow

Question

我正在尝试在 react-native 版本 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

标签： react-nativereact-native-android

Answer 1

您可以使用 react native box 阴影生成器来获得最佳实践。

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