文字无法正确显示图标

-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

我的问题是图标和文本之间的空间。我要删除它 –

给我完整的代码...我认为你的意思是等等等等文本，但是不存在于你的代码中。 –

我编辑了我的代码。请检查它 –

文字无法正确显示图标

回答

相关问题