反应原生的：“订单”不是有效的样式属性 [英] react native:"order" is not a valid style property

问题描述

我在网上搜索这个。

摘要
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 =tailstyle = {styles.newsTSubTitle} source = {{uri：item.cover}}> {item.description}< / Text> ：null} 
< / View> 
< / TouchableOpacity> 
 
 
 $ b 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 组件。在这种情况下，我应该放置一个占位符图像吗？

解决方案

React Native的flexbox与其web对手不完全相同。 RN的Flexbox实际上只支持 flexDirection ， alignItems ， justifyContent ，和 flex 属性。您可以在这里的文档中了解更多信息。

The order is a useful property in flex.

I search this on the internet.

Summary The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

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

My coder is like above, as a result, the error show.

One more thing. The item.cover sometimes does not have value. Then the Text will layout in the top of father view. I want to set the Text component in the bottom of the father view. Should I put a placeholder image in this case?

解决方案

React Native's flexbox is not 100% identical to its web counterpart. RN's flexbox really only supports flexDirection, alignItems, justifyContent, and the flex attributes. You can learn more in the documentation here.

这篇关于反应原生的：“订单”不是有效的样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！