垂直对齐飞行方向行中心的项目

Question

我在视图中有一些图标按钮，它们被父级的flex方向行推到容器的右侧。目前我无法在容器中间垂直对齐它们。这是我的代码：
的 JSX：

<View style={styles.groupContainer}>
  <View style={styles.groupTextContainer}>
    <Text style={styles.groupText}>{title.toUpperCase()}</Text>
  </View>
  <View style={styles.groupButtonsContainer}>
    <Icon
      key={name + type}
      onPress={onPress}
      style={{marginLeft: 8}}
      name={name}
      type={type}
      color='silver' />
    <Icon
      key={name + type}
      onPress={onPress}
      style={{marginLeft: 8}}
      name={name}
      type={type}
      color='silver' />
  </View>
</View>

样式：

  groupContainer: {
    backgroundColor: '#ddd',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  groupText: {
    fontWeight: 'bold',
    color: '#808080',
  },
  groupTextContainer: {
    padding: 10,
    alignSelf: 'flex-start',
  },
  groupButtonsContainer: {
    alignSelf: 'flex-end',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  }

更新
忘了提及Icon是react-native-elements组件 我需要它看起来像这样：

但我明白了：

Answer 1

<View style={styles.groupContainer}>
 <View style={styles.groupButtonsContainer}>
   <Text style={styles.groupText}>{title.toUpperCase()}</Text>
   <Icon
     key={name + type}
     onPress={onPress}
     style={{marginLeft: 8}}
     name={name}
     type={type}
     color='silver' />
 </View>
</View>

mybe你可以遵循这个代码，你可以从文本中重新开始