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

Question

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

示例布局

<device height="1000">

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


</device>

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

Answer 1

相对:相对于它的当前位置，但可以移动。或者一个 RELATIVE 定位元素是相对于 ITSELF 定位的。
绝对:在 React Native 中，一个绝对定位的元素是相对于它的最近的父元素定位的。如果该父对象恰好是一个覆盖设备整个视口(viewport)的框，那么它就像固定的一样工作(子对象可以相对于设备定位)。 Better explanation here from the docs .
官方文档的建议(见上面的链接):如果你想将一个 child 相对于不是它的 parent 的东西[在你的情况下是设备视口(viewport)]，不要为此使用样式。使用组件树。为此，请参阅解决方案 #2。
解决方案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:
将 child 放在 parent 之外并给出位置:“绝对”
像这样

<device height="1000">

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

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

</device>