FlatList contentContainerStyle -> justifyContent: 'center' 导致滚动问题
FlatList contentContainerStyle -> justifyContent: 'center' causes issues with scrolling
我有一个 FlatList
组件,我在其中渲染 x 个 TouchableHighlight
。我需要 FlatList
中的所有组件垂直居中对齐。
问题是,如果我将 justifyContent: center
放在 contentContainerStyle
中,什么也不会发生,但是,如果我将 flex: 1
添加到 contentContainerStyle
,我会得到我想要的结果。如果我不必进行滚动,这很酷,但是当我在 FlatList
中有许多组件强制滚动以查看所有组件时,滚动从这些列表的中心开始并且不会让我滚动。
这些是我的代码:
<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>
)
}}
/>
我不知道这是一个错误还是我做的不好。
这不是一个错误,你也没有做错,这是预期的行为,因为你正在向 添加显式 flex
ScrollView's
列表的容器 使其占据屏幕的整体 height
,因此 只能滚动到屏幕的内容。
你需要用flexGrow
代替flex
来解决
The flex grow factor of a flex item is relative to the size of the other children in the flex-container
<FlatList
contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
//... other props
/>
我有一个 FlatList
组件,我在其中渲染 x 个 TouchableHighlight
。我需要 FlatList
中的所有组件垂直居中对齐。
问题是,如果我将 justifyContent: center
放在 contentContainerStyle
中,什么也不会发生,但是,如果我将 flex: 1
添加到 contentContainerStyle
,我会得到我想要的结果。如果我不必进行滚动,这很酷,但是当我在 FlatList
中有许多组件强制滚动以查看所有组件时,滚动从这些列表的中心开始并且不会让我滚动。
这些是我的代码:
<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>
)
}}
/>
我不知道这是一个错误还是我做的不好。
这不是一个错误,你也没有做错,这是预期的行为,因为你正在向 添加显式 flex
ScrollView's
列表的容器 使其占据屏幕的整体 height
,因此 只能滚动到屏幕的内容。
你需要用flexGrow
代替flex
来解决
The flex grow factor of a flex item is relative to the size of the other children in the flex-container
<FlatList
contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
//... other props
/>