React Native Могут ли элементы FlatList переполнять контейнер? - PullRequest
Новая
       28

React Native Могут ли элементы FlatList переполнять контейнер?

1 голос
/ 15 января 2020

Можно ли разрешить элементу переполнять контейнер компонента FlatList? В этом примере элементы в FlatList являются обычными компонентами View, в которых есть компонент «popover» View, который я хотел бы отображать за границами контейнера FlatList.

Здесь вы можете видеть, что красные рамки обрезаны по границам контейнера FlatList

Это то, чего я хотел бы достичь (красные рамки ( позиционированы как абсолютные) выходят за границы компонента FlatList)

Мой код 

const Item = () => {
    return (
        <View // this view should be clipped and go inside the container
            style={{
                height: 55,
                width: 55,
                backgroundColor: 'lightblue',
                margin: 5,
        }}>
        <View // this view should display over FlatList boundaries
            style={{
                height: 30,
                width: 30,
                backgroundColor: 'red',
                position: 'absolute',
                left: -15,
                top: -15,
                zIndex: 40,
            }}
        />
        </View>
    );
};

const App = () => {
    return (
        <View
            style={{
                flex: 1,
            }}>
            <View
                style={{
                    backgroundColor: 'gray',
                    height: 120,
                }}
            />
            <FlatList
                style={{
                    flex: 5,
                    zIndex: 1,
                    backgroundColor: 'blue',
                }}
                data={data}
                renderItem={item => {
                    return <Item {...item} />;
                }}
                numColumns={3}
            />
        </View>
    );
};

1 Ответ

0 голосов
/ 15 января 2020

Просто добавьте overflow: 'visible' к вашему стилю FlatList: 

<FlatList
  style={{
    flex: 5,
    zIndex: 1,
    backgroundColor: 'blue',
    overflow: 'visible' // add this
  }}
  data={data}
  renderItem={item => <Item {...item} />}
  numColumns={3}
/>;
...