web-dev-qa-db-ja.com

FlatList contentContainerStyle-> justifyContent： 'center'はスクロールの問題を引き起こす

X個のFlatListをレンダリングする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>
          )
        }}
      />

これがバグなのか、それとも悪いだけなのかはわかりません。

javascriptandroidiosreact-nativemobile-development
7
SmoggeR_js

それはバグではなく、悪いことをしているわけではありません、ScrollView'sリストのコンテナに明示的なflexを追加しているので、期待される動作です画面全体のheightを取得するため、画面のコンテンツにのみスクロール可能。

flexGrowの代わりにflexを使用して解決する必要があります

フレックスアイテムのフレックスグローファクターは、flex-container内の他の子のサイズに関連してです

<FlatList
    contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
    //... other props
/>
17
Pritish Vaidya