打开原始底部模式后模糊整个页面 sheet
Blur whole page after opening the raw bottom modal sheet
我正在使用 raw-bottom-sheet 作为我的底部模态,例如菜单选项卡。这是底部模态的 github link:https://github.com/nysamnang/react-native-raw-bottom-sheet . Bottom menu tab is a part of a header component because it appear only pressing a bottom from header component. It works well but I cannot blur background of a bottom sheet. It doesnt work like a modal in that way. This is a link what I mean for blur: https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS-2.0.3.gif
这是我的 header 组件:
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>
)
}
此页面包含 header 个组件。
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
删除包装器:{backgroundColor: 'transparent'} 解决了我的问题:)
我正在使用 raw-bottom-sheet 作为我的底部模态,例如菜单选项卡。这是底部模态的 github link:https://github.com/nysamnang/react-native-raw-bottom-sheet . Bottom menu tab is a part of a header component because it appear only pressing a bottom from header component. It works well but I cannot blur background of a bottom sheet. It doesnt work like a modal in that way. This is a link what I mean for blur: https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS-2.0.3.gif
这是我的 header 组件:
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>
)
}
此页面包含 header 个组件。
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
删除包装器:{backgroundColor: 'transparent'} 解决了我的问题:)