Question

订单是flex中的一个有用属性。

我在互联网上搜索。

概要 CSS order属性指定用于在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组件。我应该在这种情况下放置占位符图像吗？

Answer 1

React Native的flexbox与其网络对应物不是100％完全相同。 RN的flexbox实际上只支持flexDirection，alignItems，justifyContent和flex属性。您可以在文档here中了解更多信息。

本机反应：“订单”不是有效的样式属性

1 个答案: