Question

我使用基于Native的组件来创建卡片。但是，我发现在显示带有文字的图标时出现问题。我想这样显示：

但我得到了这个结果：

这是我的代码：

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

请问好吗？

Answer 1

您的问题不明确，但从屏幕截图中我发现破损是问题所在。

从以下库中导入这些内容（此答案仅在您使用此库时有效）

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

在您的代码中使用Row标记并提供适当的通量以正确的方式放置图标和文本。

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

上面我只编辑了左侧标签，使用了焊剂，否则它将在不同的屏幕尺寸中断开。通过正确改变光通量值，您可以以合适的方式排列它们的位置。

文字没有正确显示图标

1 个答案: