Text wird nicht korrekt angezeigt mit Symbol

-1

Ich verwende Native-Base-Komponenten, um eine Karte zu erstellen. Aber ich finde ein Problem bei der Anzeige von Symbolen mit Text. Ich möchte es so angezeigt werden:Text wird nicht korrekt angezeigt mit Symbol

Aber ich dieses Ergebnis:

Dies ist mein Code:

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

Für den Stil:

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

Irgendeine Idee bitte?

Quelle

2017-07-24 Sihem Hcine

Ihre Frage ist nicht klar, aber aus dem Screenshot sehe ich, dass Bruch das Problem ist.

Import dieser Dinge aus der unten stehenden Bibliothek (diese Antwort funktioniert nur, wenn Sie diese Bibliothek verwenden)

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

In Ihrem Code verwenden, um den Zeilen-Tag und geben richtigen Fluss auf das Symbol und Text in der richtigen Art und Weise zu platzieren.

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

Above ich habe nur den linken Tag bearbeitet, verwendet Fluss oder sonst wird es in verschiedenem Bildschirm sizes.By bricht richtig die Flusswerte verändern Sie ihre Position in geeigneter Weise anordnen können.

Quelle

2017-07-24 11:24:27

mein Problem ist der Abstand zwischen Symbol und Text. Ich muss es löschen –

geben Sie mir den vollständigen Code ... ich denke, du meinst den bla bla-Text, aber das ist nicht in Ihrem Code vorhanden. –

Ich habe meinen Code bearbeitet. bitte überprüfen Sie es –

Text wird nicht korrekt angezeigt mit Symbol

Antwort

Verwandte Themen