在FlatList中使用溢出

时间:2018-06-22 10:52:58

标签: css react-native react-native-flatlist react-native-web

我在FlatList的所有项目中都有一个下拉菜单 但是,最后一项的菜单将被FlatList容器切断。

在Chrome上进行调试后,我发现将overflow: 'visible'添加到FlatList的div中是可行的。但是我无法覆盖它。 我尝试过

<FlatList
  ...others
  contentContainerStyle={{ overflow: 'visible' }}
/>

<FlatList
  ...others
  style={{ backgroundColor: 'red', overflow: 'visible' }}
/>

但没有一个起作用。

这就是我在Chrome检查器中看到的内容

<div> // style changes backgroundColor here, but ignoring overflow
  <div /> // contentContainerStyle changes this div
</div>

这里是我的代码:

  <FlatList
    ref='flatList'
    data={data}
    extraData={someData}
    keyExtractor={item => item.id.toString()}
    renderItem={this.renderItem}
    CellRendererComponent={({ children, index, style, ...props }) => {
      return (
        <View style={[style, { zIndex: data.length - index }]} index={index} {...props}>
          {children}
        </View>
      )
    }}
    style={{ overflow: 'visible', backgroundColor: 'red' }}
    enableEmptySections
  />

0 个答案:

没有答案