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

我用的是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>

---

实际上，一旦您已经在父视图中声明了

justify content

为

中心

，这将影响子视图的其余部分使用此样式设置道具。您可以做的是在第二个

视图中用
alignItems
替换
justify内容
，该视图包含
文本
和
图标
组件。这将使它们在父视图提供的空间中垂直对齐

此外，您还可以在父视图
中设置
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>


12只老鼠
{}}
/>

我在这里包括了一个用于测试的示例。：）
 尝试从样式中删除“flexDirection:”行
        <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>