亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

來自 react-native-elements 的樣式卡:垂直對齊標題和圖標

來自 react-native-elements 的樣式卡:垂直對齊標題和圖標

撒科打諢 2023-06-09 10:46:03
我正在使用來自 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'}
查看完整描述

1 回答

?
元芳怎么了

TA貢獻1798條經驗 獲得超7個贊

實際上,一旦您已經聲明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>

查看完整回答
反對 回復 2023-06-09
  • 1 回答
  • 0 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號