我正在尝试在 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'
}
最佳答案
尝试使用 marginHorizontal 而不是 marginLeft 和 marginRight。
const box = {
backgroundColor: 'green',
marginHorizontal:10
}
关于react-native - 如何在 React Native 中设置边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55700714/