如何正确对齐同一行中的两个项目答案

【问题标题】：How to align two items in a same row properly如何正确对齐同一行中的两个项目
【发布时间】：2021-05-11 18:32:00
【问题描述】：

我有一个View，其中包含一个Icon 和另一个View

<View style={{flexDirection: row}}>
    <Icon name={'dot} style={{marginRight: 16}} />
    <View>
       {Children}
    <View>
</View>

这就是输出的呈现方式

很明显dot 和child View 没有正确对齐。我希望这种对齐方式是这样的

我已更改Icon's style 来实现这一点，

<Icons name={'dot'} style={{marginRight: 16, marginTop: 6}} />

这里，我不清楚的是，

1.为什么Icon的渲染位置比View高一点？ 2. 申请marginTop 似乎是个小技巧。那么，是否有任何样式元素或道具可以使它们正确对齐而不使用margintop

Avinash Nayak 的回答结果：

【问题讨论】：

标签： react-native flexbox alignment

【解决方案1】：

请检查您的孩子道具是否有一些填充或边距。

或者你可以试试下面的hack。

<View style={{
     flexDirection: row,
    }}>
        <Icon name={'dot} style={{marginRight: 16}} />
        <View style={{marginTop:-4}}> // adjust the value 
           {Children}
        <View>
    </View>

【讨论】：

请在应用您的样式后查看我更新的问题。它现在居中对齐。但我想要对齐，就像我在第二个选择中显示的那样

【解决方案2】：

为什么 Icon 的渲染位置比 View 高一点？

视图元素在父视图中正确呈现，然而，当您对齐 Text 和 Icon 时，这看起来有点奇怪，但这是正确的方式。尝试通过保持背景颜色来检查Text 和Icon 的起始y coordinate。你会知道两者都是从顶部开始的相同位置。
申请marginTop 似乎是个小技巧。那么，有什么风格吗元素或道具使它们正确对齐而不使用 marginTop?

我猜NO，这是唯一的方法，你可以添加marginTop或top样式来调整顶部位置。

【讨论】：

【解决方案3】：

试试下面的代码变化：

<View style={
    {
       flexDirection: "row",
    }
}>
    <View style={{ alignItems: 'center' }} >
        <Icon name={'dot'} style={{marginRight: 16}} />
    </View>
    <View style={{ flex: 1 }} >
        {children}
    </View>
</View>

【讨论】：