ScrollView child layout (["alignItems"]) 错误

缺乏、安全感 2022-01-17 10:45 199阅读 0赞

用React Native里的ScrollView组件，给ScrollView直接加了justifyContent或alignitems属性后会报错。

> <ScrollView style=\{ \{alignItems:'center'\}\}>  
> <FlatList  
> data=\{this.state.sellData\}  
> renderItem=\{(\{item\})=><SellItem ordernum=\{item.orderNumber\} time=\{item.time\} memberid=\{item.memberId\}  
> number=\{item.number\} price=\{item.price\} total\_amount=\{item.total\_amount\}  
> sellCallBack=\{  
> ()=>\{  
> this.sellDba(item.orderId)  
> \}  
> \}  
> />\}  
> />  
> </ScrollView>

报错（ScrollView child layout (\[“alignitems”, “justifyContent”\]) must be applied through the contentContainerStyle prop）如下：  
![ScrollView child layout (\[][ScrollView child layout]

（似乎是reactnative版本升级后的问题）问题原因是scrollView和flatlist之类的组件不支持直接添加这两个属性，解决方法是给组件添加contentContainerStyle属性，这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内，在这个属性后面指定对应的样式即可：

> <ScrollView contentContainerStyle=\{ \{alignItems:'center'\}\}>  
> <FlatList  
> data=\{this.state.sellData\}  
> renderItem=\{(\{item\})=><SellItem ordernum=\{item.orderNumber\} time=\{item.time\} memberid=\{item.memberId\}  
> number=\{item.number\} price=\{item.price\} total\_amount=\{item.total\_amount\}  
> sellCallBack=\{  
> ()=>\{  
> this.sellDba(item.orderId)  
> \}  
> \}  
> />\}  
> />  
> </ScrollView>

转载于:https://blog.51cto.com/13238147/2371910

[ScrollView child layout]: https://s1.51cto.com/images/blog/201903/31/46fe67d11d8170ef0fb2873f8e68c269.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=