React Native ：平面列表中具有zIndex的组件似乎不起作用

hec6srdp 于 2022-12-14 发布在 React

关注(0)|答案(2)|浏览(246)

主渲染：

render() {
    return (

    <View>
      <FlatList
      ListEmptyComponent={() => <DialogBox type="internet" />}
      ...
    </View>
     );

<DialogBox type="internet" />通过绝对位置设置样式的容器：

export const dialogBox = EStyleSheet.create({
   container : {
       position: 'absolute',
       justifyContent: 'center',
       alignItems: 'center',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex:10000

   },
   ....

和对话框：

<View style={dialogBox.container}>
       <View style={dialogBox.box}>
       ...

如果我删除absolute表单容器，它会显示出来。但是我想把它显示在屏幕中间（而不是平面列表中间）。
但是为什么zIndex不以绝对方式工作呢？
我尝试将代码更改为：

<View style={{position: 'absolute',zIndex:1}}>
      <FlatList
      style={{position: 'absolute',zIndex:2}}

或以下内容：

<View style={{position: 'relative'}}>
      <FlatList
      style={{position: 'relative'}}

但这不是工作

react-native

来源：https://stackoverflow.com/questions/56020794/react-native-components-with-zindex-in-flatlist-does-not-seem-to-work

2条答案

按热度按时间

qzwqbdag1#

您可以将CellRendererComponent添加到FlatList中，即使只是简单地添加以下内容也可以：

CellRendererComponent={({children}) => children}

注意：Android将崩溃，除非您添加：

removeClippedSubviews={false}

赞(0）回复(0）举报 2022-12-14

yyyllmsg2#

zIndex不仅用于绝对位置。

touchableCard: {
    justifyContent: "center",
    alignItems: "center",
    zIndex: 200,
    ...
  },

  emptyNotesInfo: {
    textAlign: "center",
    zIndex: 100,
    ...
  },

试试这个：

<View>
      <FlatList style={{flex: 1}}
        renderItem={ data => <View style={{zIndex: 2}}><Text>HERE example view</Text></View>}
      ...
      />
   </View>
  <View style={{ 
       position: "absolute", 
       zIndex: 1,
       alignContent: "center",
       alignItems: "center",
       alignSelf: "center"
     }}>
     <Text>HERE What you need too hide</Text>
  </View>

赞(0）回复(0）举报 2022-12-14

我来回答

React Native ：平面列表中具有zIndex的组件似乎不起作用

2条答案

相关问题

热门标签

最新问答