如何在React Native中设置保证金

Question

我试图在react native中设置框的边距，但是这种行为很奇怪。如果我将marginLeft设置为10，则左边距为10。但是如果我还设置marginRight：10，那么左边的边距是20，右边的边距是20。这是我的代码：

// ResultList.js
const box = {
  backgroundColor: 'green',
  marginLeft: 10,
  marginRight: 10
}
return (
  <View style={box}>
    <ResultItem />
    <ResultItem />
    <ResultItem />
    <ResultItem />
    <ResultItem />
  </View>
) 

// ResultItem.js
return (
  <View style={{margin: 0}}>
    <Text style={{margin: 0}}>
      This is text Here. This is more text testing. 
      This is text Here. This is more text testing
    </Text>
  </View>
)

此代码产生以下图像。我画出黑条的地方就是绿色框应该对准的地方。值得注意的是，如果我删除marginRight: 10，则左边距的行为正确。只有当我添加marginRight时，才错。

蓝色背景视图的代码：

App.js
return (
  <View style={styles.container}> 
    <ResultList />
  </View>
);

container: {
  flex: 1,
  alignItems: 'center',
  backgroundColor: 'blue'
}

Answer 1

尝试使用 marginHorizo​​ntal 代替marginLeft和marginRight。

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

Answer 2

我看到您在const box = { ... }中一次定义了边距 因此结果项将在具有marginRight: 10 , marginLeft : 10样式的视图中呈现，并且如果您在ResultItem.js组件中设置边距，则总边距为：框边距+ ResultItem.js边距。 并且如果您未在width组件中设置<Text>，则宽度必须在0和文本长度范围内，我建议您在width组件中设置<Text>，以便设置边距并查看结果会更容易

Answer 3

您可以将文字样式更新为以下内容吗？

// ResultItem.js
return (
  <View style={{margin: 0}}>
    <Text style={{flex: 1}}>
      This is text Here. This is more text testing. 
      This is text Here. This is more text testing
    </Text>
  </View>
)

Answer 4

您可以像这样删除所有页边空白并将paddingHorizo​​ntal添加到您的容器类中吗

container: {
  flex: 1,
  alignItems: 'center',
  backgroundColor: 'blue',
  paddingHorizontal: 10
}