javascript–FlatList contentContainerStyle– > justifyContent：’center’导致滚动问题

概述我有一个FlatList组件,我在其中渲染x个TouchableHighlight.我需要将FlatList中的所有组件垂直对齐到中心.问题是,如果我把justifyContent：center放在contentContainerStyle中没有任何反应,但是,如果我将flex：1添加到contentContainerStyle,我得到我想要的结果.如果我不必进行滚动很

我有一个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列表的容器中,使得它占据了屏幕的整体高度,因此只能滚动到屏幕的内容.

您需要使用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/>

总结

以上是内存溢出为你收集整理的javascript – FlatList contentContainerStyle – > justifyContent：’center’导致滚动问题全部内容，希望文章能够帮你解决javascript – FlatList contentContainerStyle – > justifyContent：’center’导致滚动问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。