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

它是这样使用的：

<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容器均已阴影。如果文本位于灰白色的行上，则文本会被遮盖；如果文本的白色行，则该行将被遮盖，并且 border 会带有阴影！如果边框被删除，则Table容器周围的环绕阴影（我想要的唯一阴影）也将被删除。

如何将阴影应用于容器？

Answer 1

好的，问题是计算相似颜色的阴影。确保每种成分的颜色都正确。

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

背景色为白色，但应该为GREY10。偶数/奇数行不是背景/ GREY10，而是应该是GREY10 / WHITE（显式）。

在本机容器中将阴影应用于容器

1 个答案: