javascript FlatList contentContainerStyle -> justifyContent: 'center' 导致滚动问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50268409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FlatList contentContainerStyle -> justifyContent: 'center' causes issues with scrolling
提问by SmoggeR_js
I have a FlatListcomponent where I render x number of TouchableHighlight. I need all components in the FlatListaligned vertically to center.
我有一个FlatList组件，可以在其中渲染 x 个TouchableHighlight. 我需要FlatList垂直居中对齐的所有组件。
The problem is that if I put justifyContent: centerin contentContainerStylenothing happens but, if I add flex: 1to contentContainerStyleI get the result I want. It is cool if I doesn't have to make scroll, but when I have a number of components in the FlatListthat forces do scroll to see all of it the scroll start in the center of these list and don't let me scroll.
问题是，如果我把justifyContent: center在contentContainerStyle什么也没有发生，但是，如果我添加flex: 1到contentContainerStyle我得到我想要的结果。如果我不必滚动就很酷，但是当我有许多组件时FlatList，强制滚动以查看所有组件，滚动从这些列表的中心开始，并且不让我滚动。
These is my code:
这是我的代码：
<FlatList
style = {{flex: 0.7, backgroundColor: 'red'}}
data = {this.props.actions}
contentContainerStyle = {{justifyContent:'center',}}
keyExtractor={(item, index) => index}
renderItem = {({item, index})=>{
return (
<TouchableHighlight
style = {{alignItems: 'center', margin: 8, paddingTop: 8, paddingBottom: 8, //flex: 1,
borderColor: ConstantesString.colorGrisFlojito, backgroundColor: '#d7deeb',
borderRadius: 10,
}}
underlayColor = {ConstantesString.colorAzulTouched}
onPress = {()=>{
item.action();
}}>
<Text
style = {{color: '#005288' , textAlign: 'center', fontSize: 20}}
>
{item.name}
</Text>
</TouchableHighlight>
)
}}
/>
I don't know if this is a bug or I am just doing bad.
我不知道这是一个错误还是我做得不好。
回答by Pritish Vaidya
Its not a bug and you're not doing bad, it is the expected behaviour since you're adding explicit flexto the containerof the ScrollView'slist making it take the overall heightof the screen, hence Scrollable only to the screen's content.
它不是一个错误，你没有做不好的，这是预期的行为，因为你明确添加flex到容器中的ScrollView's列表使它负总责height屏幕的，因此只对屏幕内容滚动。
You need to use flexGrowinstead of flexto solve it
您需要使用flexGrow而不是flex解决它
The flex grow factor of a flex item is relative to the sizeof the other childrenin the flex-container
弹性项目的弹性增长因子与弹性容器中其他子项的大小有关
<FlatList
contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
//... other props
/>
