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

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

实际上，一旦您已经声明justifyContent在centerparent 中View，这就会影响 child 的其余部分Views拥有此样式道具。justifyContent您可以做的是在第二个View外壳中替换您的Text和Icon组件alignItems。这应该在您的父母提供的空间中垂直对齐它们View。height此外，您可以在父级View和textAlignVertical中设置约束Text以更好地对齐。        <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>