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

Question

我使用 raw-bottom-sheet 作为我的底部模式，就像菜单选项卡一样。这是底部模态的 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'} 解决了我的问题:)