React Native中的图形日历

时间:2019-11-29 19:01:37

标签: css reactjs react-native react-native-android

我没有构建此应用程序,但是我被要求对其进行一些更改,我正在尽我所能解释事情。

该应用程序包含显示不同用户的日历。每行包含一个用户。行数是根据API响应确定的,如果有3个用户,则显示3行

问题是,总是在底部有一些额外的行,它的高度比其他行小,并且没有分成几列。

我尽一切努力将其删除,我在填充和填充周围玩耍,但是无法摆脱它或将其变成白色,因此它在背景下流血,看上去不像是一排空白。 下面是代码。

get initialScrollOffset() {
    const {startDate, endDate} = this.props
    const colCount = hourIntervals(startDate, endDate).length
    const graphWidth = colCount * cellWidth
    const screenWidth = Dimensions.get('window').width

    // the 100 is to make up for padding and the left icons
    return graphWidth - screenWidth + 100
  }

和样式enter image description here

  // GRAPH
  graphContainer: {
    alignItems: 'stretch',
    flexDirection: 'row',
    flex: 1,
    position: 'relative',
    minHeight: '100%',
  },
  dataContainer: {
    backgroundColor: Colors.lightestGray,
    flex: 1,
    flexDirection: 'column',
  },
  // TIMES
  timeRow: {
    backgroundColor: Colors.white,
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  timeCol: {
    borderLeftColor: Colors.dividerColor,
    borderLeftWidth: 1,
    borderBottomColor: Colors.dividerColor,
    borderBottomWidth: 1,
    height: labelHeight,
    width: cellWidth,
  },
  graphLabel: {
    color: Colors.gray,
    fontSize: Typography.bodyFontSizeSmall,
    paddingLeft: Spacing.globalPaddingTiny,
  },
  // ICON LABELS
  graphLabels: {
    borderRightColor: Colors.dividerColor,
    borderRightWidth: 1,
    marginTop: labelHeight,
  },
  graphRowLabel: {
    alignItems: 'center',
    borderBottomColor: Colors.dividerColor,
    borderBottomWidth: 1,
    height: cellHeight,
    justifyContent: 'center',
    width: 60,
  },
  graphIcon: {
    color: Colors.myBlue,
  },
  graphRow: {
    borderBottomColor: Colors.dividerColor,
    borderBottomWidth: 1,
    height: cellHeight,
  },
  graphColRule: {
    borderLeftColor: Colors.dividerColor,
    borderLeftWidth: 1,
    bottom: 0,
    left: -1,
    position: 'absolute',
    top: labelHeight,
    width: 1,
  },

这是

0 个答案:

没有答案