反应原生：“订单”不是有效的样式属性答案

【问题标题】：react native:"order" is not a valid style property反应原生：“订单”不是有效的样式属性
【发布时间】：2017-11-02 00:26:12
【问题描述】：

顺序是 flex 中一个有用的属性。

我在网上搜索这个。

总结 CSS order 属性指定用于在其 flex 容器中布置 flex 项的顺序。元素按顺序值的升序排列。具有相同 order 值的元素按照它们在源代码中出现的顺序排列。

   <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 组件。在这种情况下我应该放置一个占位符图像吗？

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

React Native 的 flexbox 并非 100% 与其 Web 对应物相同。 RN的flexbox真的只支持flexDirection、alignItems、justifyContent和flex属性。您可以在文档here 中了解更多信息。

【讨论】：

感谢您的回答。令人沮丧的是，order 允许您简单地更改项目的顺序，尤其是考虑到桌面与移动设计。