2017-06-01 66 views
1

订单是flex中的一个有用属性。反应原生:“订单”不是有效的样式属性

我在网上搜索这个。

摘要 CSS订单属性指定用于在其flex容器中放置flex项目的顺序。元素按订单价值的升序排列。具有相同顺序值的元素按其在源代码中的显示顺序排列。

<View style={{display:'flex'}}> 
        { item.cover ? <Image style={[styles.item, styles.newsItem]} source={{uri:item.cover}}/> : null } 
        { item.title ? <Text numberOfLines={1} ellipsizeMode='tail' style={styles.newsTTopTitle} source={{uri:item.cover}}>{item.title}</Text> : null } 
        { item.description ? <Text numberOfLines={1} ellipsizeMode="tail" style={styles.newsTSubTitle} source={{uri:item.cover}}>{item.description}</Text> : null } 
       </View> 
       </TouchableOpacity> 



newsTSubTitle: { 
    fontSize:10, 
    lineHeight:13, 
    color:'#9B9B9B', 
    width:233, 
    textAlign:'left', 
    alignSelf:'flex-end', 
    order:2, 
    }, 
    newsTTopTitle: { 
    fontSize:12, 
    lineHeight:15, 
    color:'#000000', 
    width:233, 
    textAlign:'left', 
    alignSelf:'flex-end', 
    order:1, 
    }, 

我的编码器是像上面,其结果,误差显示。

还有一件事。 item.cover有时没有价值。然后Text将布局在父视图的顶部。我想在父视图的底部设置Text组件。我应该在这种情况下放置占位符图像吗?

回答

2

React Native的flexbox与其网页版本不完全相同。 RN的flexbox确实仅支持flexDirectionalignItemsjustifyContentflex属性。您可以在文档here中了解更多信息。