如何在React Native中模糊文本

时间:2019-03-29 17:30:12

标签: javascript android ios reactjs react-native

问题很简单。我有一个带有文本组件的视图。我只想让这些文字最初变得模糊。 我看到的唯一使React Native模糊的方法是通过“ react-native-blur”处理图像。

如何我们如何模糊 React Native中的文本组件?

信息:我只想制作一个用户看不到答案(通过模糊)的应用程序。

3 个答案:

答案 0 :(得分:2)

如果您不想安装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)"
  }}
/>

答案 1 :(得分: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>

答案 2 :(得分:0)

安装react-native-blur:

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...