我希望第二个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 个像素是白色的。
好吧,我自己找到了我的问题的答案。只需要将第二个包裹View
在 a 中View
并放置 position absolute
。
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}}>
<View
style={{
flex: 1,
position: 'absolute',
backgroundColor: 'blue',
top: -50,
left: 0,
right: 0,
bottom: 0,
}}
/>
</View>
</View>
);
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句