在 React Native 中垂直对齐组件

Question

我希望我的项目像这样对齐：

但不知何故它是这样的：

代码是：

 <View style={{flex: 1}}>
  <View style={{flexDirection: 'row'}>
    <Component.CircledIcon
       source={iconSource}
    />
    <Component.Text style={{fontWeight: 'bold',
      fontSize: '$regular',
      color: '$body',
      flex: 1,
      marginRight: '2.5rem',
      paddingBottom: '1rem',
    }}>
      {name}
    </Component.Text>
  </View>
 </View>

Answer 1

你只需将一个属性添加到组件的父级中（在您看来。）

justifyContent:"space-between"

请参考此链接，这可能有助于您理解样式。

（React-Native 样式备忘单）[https://github.com/vhpoet/react-native-styling-cheat-sheet]

Answer 2

试试这个：-

<View style={{flex: 1}}>
<View style={{flexDirection: 'row'
alignItems:"center"  //add this line to your code
 }>
<Component.CircledIcon
   source={iconSource}
/>
<Component.Text style={{fontWeight: 'bold',
  fontSize: '$regular',
  color: '$body',
  flex: 1,
  marginRight: '2.5rem',
  paddingBottom: '1rem',
}}>
  {name}
</Component.Text>