打开原始底部模式表后模糊整个页面

Question

我使用原始底部表单作为底部模态，就像菜单选项卡一样。这是底部模态的github链接：https://github.com/nysamnang/react-native-raw-bottom-sheet。底部菜单选项卡是页眉组件的一部分，因为它只显示为从页眉组件按下底部。它工作得很好，但我不能模糊的背景下的一张纸。它不像模态那样工作。这是一个链接，我指的是模糊：https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS-2.0.3.gif

这是我的头组件：

import React, { useRef } from 'react'
import Box from '../../components/box'
import { Logo, Add, Menu } from '../../components/icons'
import Button from '../button'
import theme from '../../utils/theme'
import RBSheet from 'react-native-raw-bottom-sheet'
import SettingsSvg from '../../components/icons/Settings'
import { User } from '../../components/icons'
import Text from '../../components/text'
import { padding } from 'styled-system'
export default function CustomHeader(props) {
const refRBSheet = useRef()
return (
<>
<Box flexDirection="row" height={50} backgroundColor="white" {...props}>
<Box flex={1} justifyContent="center" alignItems="center">
<Button onPress={() => refRBSheet.current.open()}>
<Menu color={theme.colors.textLight} />
</Button>
</Box>
<Box flex={5} justifyContent="center" alignItems="center">
<Logo width={50} color="red" />
</Box>
<Box flex={1} justifyContent="center" alignItems="center">
<Button>
<Add color={theme.colors.textLight} />
</Button>
</Box>
</Box>
<RBSheet
ref={refRBSheet}
closeOnDragDown
customStyles={{
wrapper: {
backgroundColor: 'transparent'
},
draggableIcon: {
backgroundColor: '#DEE3E3',
width: 58
},
container: {
paddingLeft: 10,
paddingRight: 10
}
}}
>
<YourOwnComponent />
</RBSheet>
</>
)
}
const YourOwnComponent = () => {
return (
<Box>
<Box
px={20}
borderBottomWidth={1}
flexDirection="row"
borderBottomColor="light"
justifyContent="center"
alignItems="center"
py={15}
>
<Button>
<User color={theme.colors.textDark} />
<Text fontSize={18} color="textDark" flex={1} px={20}>
Profilim
</Text>
</Button>
</Box>
<Box
px={20}
borderBottomWidth={1}
flexDirection="row"
borderBottomColor="light"
justifyContent="center"
alignItems="center"
py={15}
>
<Button>
<SettingsSvg color={theme.colors.textDark} />
<Text fontSize={18} color="textDark" flex={1} px={20}>
Ayarlar
</Text>
</Button>
</Box>
</Box>
)
}

这是一个包含页眉组件的页面。

import React, { useRef } from 'react'
import { SafeAreaView } from 'react-native'
import CustomHeader from '../../components/header'
import Box from '../../components/box'
import Text from '../../components/text'
import Button from '../../components/button'
function Favourites() {
return (
<Box as={SafeAreaView}>
<CustomHeader />
<Button>
<Text>asda</Text>
</Button>
</Box>
)
}
export default Favourites

Answer 1

删除包装器：｛backgroundColor:'transparent'｝解决了我的问题：(