打开原始的底部模版后，整个页面都会变得模糊。

Question

我正在使用raw-bottom-sheet作为我的底部模态，就像一个菜单标签。这是一个底部模态的github链接。https:/github.comnysamnangreact-native-raw-bottom-sheet。 . 底部菜单选项卡是一个头部组件的一部分，因为它只出现在头部组件的底部。 它工作得很好，但我不能模糊底层表的背景。它不像模态那样工作。这是一个链接，我指的是模糊。https:/raw.githubusercontent.comnysamnangstock-imagesmasterreact-native-raw-bottom-sheetRNRBS-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

删除wrapper:{backgroundColor:'transparent'}解决了我的问题:)