来自react-native-elements的样式卡:垂直对齐标题和图标

Question

我使用的是来自react-native-elements的Card。原来我想在它的标题旁边添加一个图标，但我不能让它看起来很漂亮。下面是我的代码：

<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>

结果是这样的：

​

​

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

如果注释掉卡片中看到"title“行，并注释我的个性化标题行，则如下所示：

​

​

如你所见，这里的标题垂直居中。

更新。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的其余部分，使其具有此样式属性。您可以做的是将第二个View中的justifyContent替换为alignItems，其中包含您的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。:)