水平FlatListは私がネイティブ反応でFlatListコンポーネントと少し問題を抱えている項目

Question

の異なる高さでネイティブ反応します。フラットリストには、異なる高さのアイテムがあります。ここで私が持っているものの小さな例です。

example FlatL

第一の問題は、すべての項目が最上位に位置しているということです。私はすべての項目を一番下に配置したい。

第2の問題は、FlatListの高さが常に最大のアイテムの高さであることです。だから、ここにも...小項目の白い部分に別の項目に私のコード

をスクロールすることができます。

import React from "react"; 
import { 
    Text, 
    View, 
    Dimensions, 
    StyleSheet, 
    ListView, 
    TouchableOpacity, 
    Animated, 
    Image, 
    FlatList 
} from "react-native"; 

import glamorous, { ThemeProvider } from "glamorous-native"; 

import theme from "../theme"; 

const { height, width } = Dimensions.get("window"); 

const cards = [ 
    { 
     id: 1, 
     color: "red", 
     height: 400 
    }, 
    { 
     id: 2, 
     color: "blue", 
     height: 300 
    }, 
    { 
     id: 3, 
     color: "yellow", 
     height: 200 
    } 
]; 

class Test extends React.Component { 
    render() { 
     return (
      <View style={{ bottom: 0 }}> 
       <FlatList 
        ref={elm => (this.flatList = elm)} 
        showsHorizontalScrollIndicator={false} 
        data={cards} 
        pagingEnabled={true} 
        horizontal={true} 
        keyExtractor={item => item.id} 
        renderItem={({ item }) => (
         <View 
          style={{ 
           height: item.height, 
           width: width, 
           backgroundColor: item.color 
          }} 
         /> 
        )} 
       /> 
      </View> 
     ); 
    } 
} 

export default Test; 

を誰も解決策を持って？

Answer 1

FlatList自体のcontentContainerStyleプロパティを設定すると、各項目の位置を変更できます。しかし、FlatListの高さは、常にその内部の最大のコンポーネントの高さでなければなりません。