javascript - 来自 react-native-elements 的样式卡 : Align Title and icon vertically

Question

我正在使用来自 react-native-elements 的卡片。结果我想在它的标题旁边添加一个图标，但我不能让它看起来不错。 这是我的代码:

<Card
  //title={this.props.item.offer.amount + " " + this.props.item.request.good}
  title={
    <View style={{justifyContent: 'center'}}>
      <View style={{display: "flex",flexDirection: "row", justifyContent: 'center'}}>
        <Text style={{fontSize: 18, justifyContent: 'center', fontWeight: 'bold'}}>{this.props.item.offer.amount + " " + this.props.item.request.good}</Text>
        <View style={{flexGrow: 1}} />
        <Button
        buttonStyle={styles.localize}
        icon={<Ionicons name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
        onPress={() => this.props.navigation.push('Rastrear')}
        />
      </View>
      <View
            style ={{
              borderWidth: 0.5,
              borderColor:'grey',
              margin:2,
        }}
      />
  </View>
  }
  titleStyle={{textAlign: 'left'}}
  containerStyle={{width: Dimensions.get('window').width-25}}>
  ...
</Card>

结果看起来像这样:

我想要的是垂直对齐标题和图标。我怎样才能做到这一点？

如果注释掉您在卡片内部看到的“标题”行并注释掉我的个性化那一行，它看起来像这样:

如您所见，此处的标题垂直居中。

更新。 styles.localize 看起来像这样:

localize: {
    padding: 4,
    backgroundColor: '#FF5733',
    borderColor: '#FF5733',
    borderWidth: 2,
    width: Dimensions.get('window').width-370, 
    borderRadius: 10,
    justifyContent: 'center'
}

Answer 1

实际上，一旦您已经在父级 View 中将 justifyContent 声明为 center，这将影响子级的其余部分 Views 来拥有这个样式 Prop 。你可以做的是用 替换第二个 View 中的 justifyContent 包含你的 Text 和 Icon 组件对齐项目。这应该在您的父 View 提供的空间中垂直对齐它们。

此外，您可以在父 View 中设置 height 约束，在 Text 中设置 textAlignVertical 以获得更好的效果对齐方式。

        <View style={{justifyContent: 'center', height: 60}}>
          <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
            <Text style={{fontSize: 18, textAlignVertical: 'center', fontWeight: 'bold'}}>12 Mouses</Text>
            <View style={{flexGrow: 1}} />
            <Button
              buttonStyle={styles.localize}
              icon={<Icon name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
              onPress={() => {}}
            />
          </View>
          <View
                style ={{
                  borderWidth: 0.5,
                  borderColor:'grey',
                  margin:2,
            }}
          />
        </View>

我已经包含了一个 Snack在这里进行测试。 :)