Применить тень к контейнеру в реагирующем

Question

У меня есть компонент таблицы, который имеет разные стили для первой, последней строк и нечетных и четных элементов:

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

Используется какthis:

<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 находится в тени.Текст затенен, если он находится на белой строке, строка затенена, если это белая строка, а граница имеет тень!Если граница удаляется, тень от контейнера таблицы (единственная тень, которую я хочу) также удаляется.

Как применить тень к контейнеру?

Answer 1

Хорошо, проблема в расчете теней на похожие цвета.Убедитесь, что цвета являются правильными для каждого компонента.

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

Цвет фона был БЕЛЫЙ, но он должен был быть GREY10.Четные / нечетные строки были ничем / фоном и GREY10, но должны были быть GREY10 / WHITE (явно).