在 react-native 中将阴影应用于容器答案

【问题标题】：Apply shadow to a container in react-native在 react-native 中将阴影应用于容器
【发布时间】：2018-09-19 23:57:52
【问题描述】：

我有一个表格组件，它的第一行、最后一行以及奇数和偶数元素的样式不同：

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


export const Table = ({ children }) => {
  // different style for odd and even elements, first and last rows
  let nextChildren = React.Children.toArray(children).filter(child => !!child);

  nextChildren = nextChildren.map(
    (el, i) => (i % 2 === 1 ? el : React.cloneElement(el, { odd: true }))
  );

  nextChildren[0] = React.cloneElement(nextChildren[0], { firstRow: true })

  nextChildren[nextChildren.length - 1] = React.cloneElement(
    nextChildren[nextChildren.length - 1],
    { lastRow: true }
  );

  return <View style={styles.table}>{nextChildren}</View>;
}

它包含几行：

export const Row = ({ children, type, firstRow, lastRow, odd, rowStyle, title, subtitle }) => (
  <View
    style={[
      styles.row,
      styles[type],
      rowStyle,
      odd ? styles.odd : {},
      firstRow ? styles.firstRow : {},
      lastRow ? styles.lastRow : {},
    ]}
  >
    {title && <Text style={styles.rowTitle}>{title}</Text>}
    {subtitle && <Text style={styles.rowSubtitle}>{subtitle}</Text>}
    {children}
  </View>
);

它是这样使用的：

<Table>
  <Row type='column' title='Status' subtitle='status' />
  <Row type='column' title='Transaction Start' subtitle='start' />
  <Row type='column' title='Transaction Done' subtitle='end' />
  <Row type='column' title='From' subtitle='from' />
  <Row type='column' title='To' subtitle='to' />
  <Row type='column' title='Transaction Number' subtitle='aewfibvkadier' />
</Table>

重要的样式是第一个样式，table：它应用于表格容器，同时具有边框（测试原因）和阴影。

import { StyleSheet } from 'react-native';
const GREY10 = '#F8F9FB'
const GREY50 = '#515A64'
const BLACK = '#000000'

const styles = StyleSheet.create({
  table: {
    margin: 12,

    // shadow
    shadowColor: BLACK,
    shadowOpacity: 1,
    shadowRadius: 10,
    shadowOffset: {
      height: 2,
      width: 2,
    },

    // border
    borderColor: BLACK,
    borderWidth: 1,
    borderRadius: 2,
  },
  row: {
    flexDirection: 'row',
    paddingHorizontal: 12,
    paddingVertical: 18,
    borderStyle: 'solid',
  },

  // row styles
  firstRow: {
    borderTopRightRadius: 6,
    borderTopLeftRadius: 6,
  },
  lastRow: {
    borderBottomRightRadius: 6,
    borderBottomLeftRadius: 6,
  },
  odd: {
    backgroundColor: GREY10,
  },

  // row types
  default: {
  },
  column: {
    flexDirection: 'column',
  },

  // styling for things in rows
  rowTitle: {
    color: GREY50,
    marginBottom: 4,
    fontSize: 16,
    lineHeight: 20,
  },
  rowSubtitle: {
    color: BLACK,
    fontSize: 16,
    lineHeight: 20,
  },

})

您希望阴影应用于表格容器，对吧？错误的。

除了 Table 容器之外的所有东西都被遮蔽了。如果 Text 在灰白色 Row 上，则 Text 会被遮蔽，如果 Row 是白色 Row，则 Row 会被遮蔽，并且 border 有阴影！如果边框被移除，表格容器周围的环绕阴影（我想要的唯一阴影）也会被移除。

如何将阴影应用到容器？

【问题讨论】：

标签： css react-native react-native-ios

【解决方案1】：

好的，问题是计算相似颜色的阴影。确保每个组件的颜色都完全正确。

const WHITE = '#fff'
const GREY10 = '#F8F9FB'
const BLACK = '#000000'

背景颜色是白色，但应该是 GREY10。偶数/奇数行什么都不是/背景和 GREY10，但应该是 GREY10/WHITE（明确）。

【讨论】：