Question

我的网格中有一行和一行。我用它的col复制了行并将它粘贴在第一行下面，这样我就可以测试彼此之间有2个col。那部分有效，但遗憾的是，他们正在坚持彼此。它们之间没有空间/填充。我尝试在行和col中添加一个顶部：20但是它们都没有工作，实际上它使第二个col的高度更短。

关于如何解决此问题的任何想法？这是具有Native Base的React Native。

Screenshot of the issue

      <Content>
        <Grid style={Style.contentContainer}>
          <Row style={Style.content}>
            <Col>
              <Text>Test</Text>
              <View style={Style.completelyCenteredComponent}>
                <Text>Text here</Text>
              </View>
            </Col>
          </Row>

          <Row style={Style.content}>
            <Col>
              <Text>Test</Text>
              <View style={Style.completelyCenteredComponent}>
                <Text>Text here</Text>
              </View>
            </Col>
          </Row>    
        </Grid>
      </Content>

风格：

module.exports = StyleSheet.create({

  mainApp: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
  },

  backgroundImage: {
      flex: 1,
      resizeMode: 'cover'
  },

  contentContainer: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
  },

  content: {
      backgroundColor: 'rgba(255, 255, 255, 0.84)',
      minWidth: '88%',
      maxWidth: '88%',
      height: 200,
      top: 0,
      padding: 26,
      borderWidth: 0.6,
      borderColor: '#000000'
  },

  completelyCenteredComponent: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
  },

});

Answer 1

在我的观点中尝试在样式的内容对象上添加边距它会工作我认为。你在哪里添加了顶部：20在样式中没有这样的代码

Answer 2

您需要为您的内容添加marginBottom，并使用marginBottom: 0为最后一行创建其他样式。

你的风格：

content: {
    ... your style
    marginBottom: 20,
},
lastRow: {
    marginBottom: 0,
}

你的组件：

<Grid>
    <Row style={style.content}>...</Row>
    <Row style={[style.content, style.lastRow]}>...</Row>
</Grid>

反应原生基础 - 网格之间的空间？

2 个答案: