我有一个基本模态，当按下时，我想在Flatlist组件的rendered项的位置渲染它：

<FlatList style={{ height: "100%" }} data={allNotes} numColumns={1} renderItem= {renderNote}></FlatList>

const renderNote = ({ item }) => (
    <TouchableOpacity
      style={styles.itemStyle}
      onPress={() => setModalVisible(!modalVisible)}
    >
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.relativeView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Text numberOfLines={1} style={styles.itemText}>
        {item.text}
      </Text>
    </TouchableOpacity>
  );

当我在模态或模态的子元素上设置绝对位置时，模态总是显示在屏幕的顶部，而不是相对于父元素。

const styles = StyleSheet.create({
 relativeView: {
    position: "absolute",
    marginLeft: 20,
    justifyContent: "center",
    alignItems: "center",
  },
})