文字無法正確顯示圖標

-1

我使用基於本機的組件來創建卡片。但是，我發現在顯示帶有文本的圖標時出現問題。我想是這樣顯示的：文字無法正確顯示圖標

，但我得到這個結果：

這是我的代碼：

<Card style= {{ flex: 1 , width : width-30 , marginTop :10}}> 
     <CardItem cardBody> 
      <Image source= { require('./images/post-media/1.png') } style={{height: 200, width: null, flex: 1}}> 
     </Image> 
     </CardItem> 
     <CardItem style = {{backgroundColor: 'white'}}> 
     <Body> 
     <Text style= {styles.txt}> 
     this is my text blabla blabla blabla 
     </Text> 
     <View style={{ borderBottomWidth: 1, borderBottomColor: '#839fcc', width: width-70 }} /> 
     </Body> 
    </CardItem> 
     <CardItem > 
      <Left> 
      <Button transparent> 
      <Icon name="time" style={styles.icon} /> 
      <Text>2017.07.05 </Text> 
      </Button> 
      </Left> 
      <Body> 
      <Button transparent > 
      <Icon name="heart" style={styles.icon} /> 
      <Text >325</Text> 
      </Button> 
      </Body> 
      <Right> 
      <Icon name="chatbubbles" style={styles.activeIcon} /> 
      <Text>325</Text> 
      </Right> 
     </CardItem> 
     </Card>

對於風格：

icon: { 
    color: '#839fcc' 
    }, 
    activeIcon:{ 
    color:'#0d5be9' 
    }

有什麼想法嗎？

來源

2017-07-24 Sihem Hcine

你的問題不清楚，但從屏幕截圖中我看到破損是問題。

導入從下面的庫這些東西（如果你使用這個庫這個答案只能）

import { Col, Row, Grid } from 'react-native-easy-grid';

在你的代碼中使用的行代碼，並給予適當的流量放置在適當的方式圖標和文本。

 <CardItem > 
      <Left> 
      <Row> 
      <Button transparent> 
      <View style={{flex: 1}}> 
       <View style={{flex: 2}}> 
       <Icon name="time" style={styles.icon} /> 
       </View> 
      <View style={{flex: 2}}> 
       <Text>2017.07.05 </Text> 
      </View> 
      </View> 
      </Button> 
      </Row> 
      </Left> 
     </CardItem>

以上我只是編輯左邊的標記，使用助焊劑否則會在不同的屏幕sizes.By打破正常改變光通量值，你可以安排他們以適當的方式定位。

來源

2017-07-24 11:24:27

我的問題是圖標和文本之間的空間。我要刪除它 –

給我完整的代碼...我認爲你的意思是等等等等文本，但是不存在於你的代碼中。 –

我編輯了我的代碼。請檢查它 –

文字無法正確顯示圖標

回答

相關問題