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

问题描述

我在网上搜索这个。

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

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

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