Question

我在<Child />中有一个子元素<Parent height="40"/>，我想相对于设备视图区域而不是父视图绝对定位子元素。

示例布局

<device height="1000">

 <header height="500">
 <ScrollView />
 <parent height=40">
  <child height="300" top="150" />
 </parent>


</device>

position="absolute"是相对于父级的，没有position="fixed"

Answer 1

相对：相对于当前位置，但可以移动。或相对定位元素相对于ITSELF定位。

绝对：绝对定位的元素相对于IT的最近定位的父对象定位。如果存在，则相对于设备而言，它就像固定的设备一样。

解决方案1：

这是一个演示：https://snack.expo.io/@nomi9995/7ee9c4

您可以使用Portal中的react-native-paper来定位来自设备而不是来自父设备的子组件

import * as React from "react";
import { View, StyleSheet } from "react-native";
import { Portal, Text, Provider as PaperProvider } from "react-native-paper";

const Child=()=>{
return (
  <Text>This is Child component which take positioned from Parent</Text>
    )
}
class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <Portal>
            <Child />
          </Portal>
        </View>
      </View>
    );
  }
  Î;
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
    backgroundColor: "#eee",
  },
});

const JSX = () => {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
};

export default JSX;

解决方案2：

将孩子置于父母之外，并给予以下职位：“绝对”

像这样

<device height="1000">

 <header height="500">
 <ScrollView />
 <parent height=40">
 </parent>

 <child height="300" style={{position:"absolute",top:150}} />

</device>

react-native：将子元素相对于设备而不是父元素定位

1 个答案:

解决方案1：

解决方案2：