Question

考虑以下示例。绝对定位的View只能在其父Flexbox的范围内呈现。

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <View style={{flex: 1}}>
      <View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
        <Text>I am ABSOLUTE</Text>
      </View>
    </View>
    <View style={{backgroundColor: 'blue', top: 50}}>
      <View style={{margin: 10, padding: 10, height: 50}}>
        <Text>I have a fixed height</Text>
      </View>
    </View>
  </View>
</View>

PS。我使用的是RN 0.42.0。

Answer 1

＆＃34; absolute定位总是相对于父母＆＃34;
https://facebook.github.io/react-native/docs/layout-props.html#position

如果我需要一个具有绝对定位的视图，我会将它放在根组件的底部。因此，基于您的示例，它看起来像 -

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    ....
  </View>
  <View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
    <Text>I am ABSOLUTE</Text>
  </View>
</View>

ReactNative：无法以绝对定位占据整个屏幕

1 个答案: