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