Размытие всей страницы после открытия необработанного нижнего модального листа - PullRequest
Новая
       81

Размытие всей страницы после открытия необработанного нижнего модального листа

0 голосов
/ 08 мая 2020

Я использую 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

1 Ответ

0 голосов
/ 08 мая 2020

удаление оболочки: {backgroundColor: 'transparent'} решило мою проблему :)

...