Reactnative 在 react native 平面列表中动态定位弹出窗口

发布于08月17日

我有一个带有一组组件的Reaction应用程序.我有一组卡片和一个弹出窗口.我想要的是，每当用户单击卡时，它都应该显示弹出窗口. 我目前的 struct 是:

<CardWrapper>
   <Popup></Popup>
   <Card>...</Card>
   <Card>...</Card>
   <Card>...</Card>
</CardWrapper>

目前，CardWrapper是相对位置，Popup是绝对位置.每当用户点击卡片时，它都会显示Popup. 但是，目前显示Popup的位置相对于Cardwrapper. 无论用户在哪里点击，Popup都将始终显示为

但是，我希望它与点击的卡片相关.比如:

如果用户点击卡2

或者如果用户点击卡4

我不知道如何才能做到这一点.我的弹出窗口不应该在我的卡片内.有什么办法可以做到这一点吗？

推荐答案

啊，多亏了你的提问，我终于学到了很多东西.我终于明白了你的问题到底是什么

这是工作解决方案Expo link

import * as React from 'react';
import { Text, View, StyleSheet ,FlatList ,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import {useRef , createRef , useState} from 'react'


export default function App() {

  const data = [1,2,3,4,5,6,7,8,9,10];

  const [topH,setTop] = useState(0)

  const elementsRef = useRef(data.map(() => createRef()));

  const onCardPress = (item,newRef) => {

 newRef?.current?.measureInWindow( (fx, fy, width, height, px, py) => {
            console.log('Component width is: ' + width)
            console.log('Component height is: ' + height)
            console.log('X offset to frame: ' + fx)
            console.log('Y offset to frame: ' + fy)
            console.log('X offset to page: ' + px)
            console.log('Y offset to page: ' + py)

            setTop(fy)
        })        
  }

const renderEach = ({item,index}) => {


  return(
    <TouchableOpacity onPress={() => onCardPress (item,elementsRef?.current[index])} style={styles.eachCard} ref={elementsRef?.current[index]} >
    <Text>{item}</Text>
    </TouchableOpacity>
  )
}

const Popup = () => {
  if(topH === 0 ){
    return null
  }
  return(
    <View style={{backgroundColor:'yellow' , position:'absolute',zIndex:3 , height:60,width:60 , right:30 , top:topH}} >
    <Text> popup </Text>
    </View>
  )
}

  return (
    <View style={styles.container}>
      <View style={{flex:1}} >
      <Popup />
      <FlatList 
      style={{flex:1}}
      data={data}
      renderItem={renderEach}
       />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  eachCard:{
    height:100,
    margin:10,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#850D5F'
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

所以基本上，如果你看到我们有动态的引用，还有newRef?.current?.measureInWindow是给我们的布局位置wrt到y，它是相对于帧的，而im在top位置设置相同

请不要有任何疑问.也可以看看我所取得的成果.希望这是你的怀疑