问题很简单。我有一个带有文本组件的视图。我只是希望这个文本最初是模糊的。我看到在 React Native 中模糊某些内容的唯一解决方案是通过这种"反应原生模糊"来模糊图像。
我们如何在 React Native 中模糊文本组件?
信息:我只是想制作一个用户无法直接看到答案的应用程序(通过模糊(。
如果您不想安装 react-native-blur
/expo-blur
或者它不适合您,这是一种解决方法/黑客,可以模仿View
中模糊文本的外观。可以根据需要调整这些值。
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>
您可以简单地使用css来做到这一点,您可以根据需要随意更改不透明度,偏移量,颜色,半径
<Text
style={{
color: "#fff0",
textShadowColor: "rgba(255,255,255,0.8)",
textShadowOffset: {
width: 0,
height: 0,
},
textShadowRadius: 10,
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
}}
>
Blurred
</Text>
install react-native-blur:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...