React Native中的绝对位置

Question

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

如果你想自己制作，请参阅ksav的答案

---

我有一个组件，它在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>

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

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

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

React Native中的

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

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

我的演示

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，而不是模态。例如，它位于打开它的按钮的底部，但不会占用流中的任何空间。

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,
},
});

演示