一个 React 组件,它会模糊视图下面的所有内容。
一个 React 组件,它会模糊视图下面的所有内容。其常见用途是导航栏、选项卡栏和模态框。
¥A React component that blurs everything underneath the view. Common usage of this is for navigation bars, tab bars, and modals.
Android 上的BlurView
是一项实验性功能。要启用它,请使用experimentalBlurMethod
属性。
¥Known issues
例如,在使用 FlatList
渲染动态内容之前渲染 BlurView
时,模糊效果不会更新。要解决此问题,请确保 BlurView
在动态内容组件之后渲染。例如:
¥The blur effect does not update when BlurView
is rendered before dynamic content is rendered using, for example, FlatList
. To fix this, make sure that BlurView
is rendered after the dynamic content component. For example:
<View>
<FlatList />
<BlurView />
</View>
¥Installation
-
npx expo install expo-blur
If you are installing this in an existing React Native app (bare workflow), start by installing expo
in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.
¥Usage
import { Text, StyleSheet, View, SafeAreaView } from 'react-native';
import { BlurView } from 'expo-blur';
export default function App() {
const text = 'Hello, my container is blurring contents underneath!';
return (
<SafeAreaView style={styles.container}>
<View style={styles.background}>
{[...Array(20).keys()].map(i => (
<View
key={`box-${i}`}
style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
/>
))}
</View>
<BlurView intensity={100} style={styles.blurContainer}>
<Text style={styles.text}>{text}</Text>
</BlurView>
<BlurView intensity={80} tint="light" style={styles.blurContainer}>
<Text style={styles.text}>{text}</Text>
</BlurView>
<BlurView intensity={90} tint="dark" style={styles.blurContainer}>
<Text style={[styles.text, { color: '#fff' }]}>{text}</Text>
</BlurView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
blurContainer: {
flex: 1,
padding: 20,
margin: 16,
textAlign: 'center',
justifyContent: 'center',
overflow: 'hidden',
borderRadius: 20,
},
background: {
flex: 1,
flexWrap: 'wrap',
...StyleSheet.absoluteFill,
},
box: {
width: '25%',
height: '20%',
},
boxEven: {
backgroundColor: 'orangered',
},
boxOdd: {
backgroundColor: 'gold',
},
text: {
fontSize: 24,
fontWeight: '600',
},
});
import { BlurView } from 'expo-blur';
BlurView
Type: React.Component<BlurViewProps>
blurReductionFactor
Optional • Type: number
• Default: 4
A number by which the blur intensity will be divided on Android.
When using experimental blur methods on Android, the perceived blur intensity might differ from iOS at different intensity levels. This property can be used to fine tune it on Android to match it more closely with iOS.
experimentalBlurMethod
Optional • Type: ExperimentalBlurMethod
• Default: 'none'
Blur method to use on Android.
Currently,BlurView
support is experimental on Android and may cause performance and graphical issues. It can be enabled by setting this property.
intensity
Optional • Type: number
• Default: 50
A number from 1
to 100
to control the intensity of the blur effect.
You can animate this property using react-native-reanimated
.
BlurTint
Literal Type: string
Acceptable values are: 'light'
| 'dark'
| 'default'
| 'extraLight'
| 'regular'
| 'prominent'
| 'systemUltraThinMaterial'
| 'systemThinMaterial'
| 'systemMaterial'
| 'systemThickMaterial'
| 'systemChromeMaterial'
| 'systemUltraThinMaterialLight'
| 'systemThinMaterialLight'
| 'systemMaterialLight'
| 'systemThickMaterialLight'
| 'systemChromeMaterialLight'
| 'systemUltraThinMaterialDark'
| 'systemThinMaterialDark'
| 'systemMaterialDark'
| 'systemThickMaterialDark'
| 'systemChromeMaterialDark'
ExperimentalBlurMethod
Literal Type: string
Blur method to use on Android.
'none'
- Falls back to a semi-transparent view instead of rendering a blur effect.
'dimezisBlurView'
- Uses a native blur view implementation based on BlurView library. This method may lead to decreased performance and rendering issues during transitions made by react-native-screens
.
Acceptable values are: 'none'
| 'dimezisBlurView'
borderRadius
与 BlurView
结合使用¥Using borderRadius
with BlurView
在 Android 和 iOS 上使用 BlurView
时,显式提供的 borderRadius
属性不会应用。要解决此问题,你可以使用 overflow: 'hidden'
样式,因为 BlurView
继承了 <View>
的 props。请参阅 用法 的示例。
¥When using BlurView
on Android and iOS, the borderRadius
property is not applied when provided explicitly. To fix this, you can use the overflow: 'hidden'
style since BlurView
inherits props from <View>
. See Usage for an example.