react-native - {Flex: 1} 不适用于相对定位

Question

我希望第二个View相对位于第一个下方的 -50 处View，但第二个View不会完全延伸到底部。

import React from 'react';
import {View, Text} from 'react-native';

export const OverlayStorybook = () => {
  return (
    <View style={{flex: 1}}>
      <View style={{height: 100, backgroundColor: 'red'}}>
        <Text>OverlayStorybook</Text>
      </View>
      <View style={{flex: 1, backgroundColor: 'blue', top: 0}} />
    </View>
  );
};

import React from 'react';
import {View, Text} from 'react-native';

export const OverlayStorybook = () => {
  return (
    <View style={{flex: 1}}>
      <View style={{height: 100, backgroundColor: 'red'}}>
        <Text>OverlayStorybook</Text>
      </View>
      <View style={{flex: 1, backgroundColor: 'blue', top: -50}} />
    </View>
  );
};

您可以在底部看到 50 个白色像素。

标签： react-native

Answer 1

这是我想出的一个选项：https ://snack.expo.io/@zvona/full-flex

所以删除 flex 并放置绝对定位，然后添加 50（而不是减去它）。当然，“50”取决于您要放置的位置。因此，如果标题元素的高度发生变化，基本上很容易出错。

<View style={{position: 'absolute', backgroundColor: 'rgba(32, 32, 128, 0.8)', top: 50, left: 0, right: 0, bottom: 0}} />
</View>