React-Native 中的绝对位置

Question

修复：我的问题是我不知道应该使用什么。 this 是我想要的。

如果你想自己制作，请看ksav的answer

---

我有一个在 React Native 中充当 Picker 的组件。

  <Modal
    transparent
    visible={editVisible}
    animationType="fade"
    onRequestClose={modalChange}>
    <Pressable style={styles.modalView} onPressOut={modalChange}>
      <View style={styles.modalContainer}>
        <TouchableOpacity style={styles.button} onPressOut={modalChange}>
          <Text>Edit button</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPressOut={modalChange}>
          <Text>Delete button</Text>
        </TouchableOpacity>
      </View>
    </Pressable>
  </Modal>
  <TouchableOpacity onPress={modalChange}>
    <Ionicons name="ios-ellipsis-horizontal-sharp" size={20} />
  </TouchableOpacity>

我想将 modalContainer 设置为始终位于 TouchableOpacity 的底部 (Ionicons)。但我设置了 TouchableOpacity 的 css：position: 'relative' 和

modalContainer: {
  position: absolute,
  bottom: 0,
  right: 0,
}

它没有按预期工作。因为：

React Native 中的position 与常规 CSS 类似，但默认情况下所有内容都设置为 relative，因此 absolute 的定位始终相对于父级。

为了简化问题，我想要一些View 总是在按钮下方，当我onPress 时会显示视图

My demo

Answer 1

确保父视图垂直弯曲并且你的样式是position: 'absolute',

    import * as React from 'react';
    import { Text, View, StyleSheet, TouchableOpacity, Modal, Pressable } from 'react-native';

    export default function App() {
      const [modalVisible, setModalVisible] = React.useState(false);

      return (
        <View style={styles.centeredView}>
          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
              setModalVisible(!modalVisible);
            }}
          >
            <View style={styles.modalContainer}>
              <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>
          <Pressable
            style={[styles.button, styles.buttonOpen]}
            onPress={() => setModalVisible(true)}
          >
            <Text style={styles.textStyle}>Show Modal</Text>
          </Pressable>
        </View>
      );
    }

    const styles = StyleSheet.create({
      modalContainer: {
        position: 'absolute',
        bottom: 0,
        right: 0,
      },
      centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
      },
      modalView: {
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
      },
    });

---

经过讨论，我认为最好将您想要的描述为工具提示或popover，而不是modal。例如，它位于打开它的按钮的底部，但不占用流程中的任何空间。

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Modal,
  Pressable,
  SafeAreaView,
} from 'react-native';

export default function App() {
  const [tooltipVisible, settooltipVisible] = React.useState(false);
  const [buttonHeight, setButtonHeight] = React.useState(0);

  const handleLayout = (event) => {
    const { x, y, height, width } = event.nativeEvent.layout;
    setButtonHeight(height)
  };

  const handlePress = () => {
    settooltipVisible(!tooltipVisible);
  };  

  return (
    <SafeAreaView style={styles.centeredView}>
      <Pressable
        onLayout={handleLayout}
        style={[styles.button, styles.buttonOpen]}
        onPress={() => settooltipVisible(true)}>
        <Text style={styles.textStyle}>Show Thing</Text>
      </Pressable>

      {tooltipVisible && (
        <View style={[styles.tooltipView, {top: buttonHeight}]}>
          <Text style={styles.modalText}>Hello World!</Text>
          <Pressable
            style={[styles.button, styles.buttonClose]}
            onPress={handlePress}>
            <Text style={styles.textStyle}>Hide Thing</Text>
          </Pressable>
        </View>
      )}

      <Text>Some other content</Text>
      <Text>Some other content</Text>
      <Text>Some other content</Text>
      <Text>Some other content</Text>
      <Text>Some other content</Text>
      <Text>Some other content</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 20,
    backgroundColor: 'blue',
    color: 'white',
  },

  centeredView: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 60,
  },
  tooltipView: {
    zIndex:1,
    padding: 20,
    position: 'absolute',
    backgroundColor: 'white',
    borderRadius: 20,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
});

Demo