在垂直平面列表中重叠下一项 - React Native

Posted 2023-02-21

【中文标题】在垂直平面列表中重叠下一项 - React Native

【英文标题】：Overlapping Next Item in Vertical FlatList - React Native

【发布时间】：2021-12-29 05:00:25

【问题描述】：

我正在尝试重叠 FlatList 中的项目。

这个平面列表基本上加载了我的应用程序的所有小部件。这是一个服务器驱动的用户界面。

顶部的个人资料小部件，需要与其下方的图像小部件重叠。

我会附上一些截图来更好地解释问题：

我目前拥有的

我想要实现的目标

发生了什么

我尝试添加 zIndex 和海拔，但它们不起作用。

圆圈应该出现在图像的顶部，但如果我让它绝对定位，它就会出现在图像的后面。

所有小部件都在单独的文件中，并且是功能组件。它们被加载到 FlatList 中。

如果您需要更多信息，请告诉我，我们很乐意添加。 提前致谢！

【参考方案1】：

您必须使用 position:'absolute' 并将圆形元素作为元素列表的最后一个元素，以便它到达顶部。

截图

这是相同的代码：

import React,  Component  from 'react';
import 
  AppRegistry, FlatList,
  StyleSheet, Text, View, Alert,Image
 from 'react-native';

export default class FlatListBasics extends Component 

  renderSeparator = () => 
    return (
      <View
        style=
          height: 1,
          backgroundColor: "#000",
        />
    );
  ;
  //handling onPress action  
  getListViewItem = (item) => 
    Alert.alert(item.key);
  

  render() 
    return (
      <View style=styles.container>
        <FlatList
          data=[
             key: 'android' ,  key: 'ios' ,  key: 'Java' ,  key: 'Swift' ,
             key: 'php' ,  key: 'Hadoop' ,  key: 'Sap' ,
             key: 'Python' ,  key: 'Ajax' ,  key: 'C++' ,
             key: 'Ruby' ,  key: 'Rails' ,  key: '.Net' ,
             key: 'Perl' ,  key: 'Sap' ,  key: 'Python' ,
             key: 'Ajax' ,  key: 'C++' ,  key: 'Ruby' ,
             key: 'Rails' ,  key: '.Net' ,  key: 'Perl' 
          ]
          renderItem=() =>
          <View style=flexDirection:'row', height:250, marginBottom:10>
            <Image source=require('./img/image1.jpg') style= height:250,/>
          </View>
            
        />
        <View style= margin: 10, position: 'absolute' >
          <View style=
            backgroundColor: 'blue',
            borderRadius: 10, height: 50, width: 50, borderRadius: 100 / 2
          ></View>
        </View>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
  ,
  item: 
    padding: 10,
    fontSize: 18,
    height: 44,
  ,
)


AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

【讨论】：

圆形元素不是平面列表之外的东西。它本身就是一个平面列表项目。无法在平面列表之外呈现。

正如您提到的“顶部的配置文件小部件，需要与其下方的图像小部件重叠。”您没有提到该元素是平面列表的一部分。请提出一个正确的问题，明确你需要什么作为输出。

我说：这个平面列表基本上加载了我应用程序的所有小部件。这是一个服务器驱动的用户界面。顶部的配置文件小部件需要与其下方的图像小部件重叠。我明确说 Profile WIDGET。请仔细阅读问题。