react-native - 如何在 React Native 中设置边距

Question

我正在尝试在 React Native 中设置框的边距，但行为很奇怪。如果我设置 marginLeft: 10，则左边距为 10。但是如果我也设置了 marginRight: 10，那么左边的 margin 是 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 中添加时才错。

蓝色背景 View 的代码:

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

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

Answer 1

尝试使用 ma​​rginHorizo​​ntal 而不是 marginLeft 和 marginRight。

const box = {
  backgroundColor: 'green',
  marginHorizontal:10
}