如何在 React Native 中模糊文本答案

【问题标题】：How to blur text in React Native如何在 React Native 中模糊文本
【发布时间】：2019-03-29 17:30:11
【问题描述】：

问题很简单。我有一个带有文本组件的视图。我只是希望这个文本最初是模糊的。我看到在 React Native 中模糊某些东西的唯一解决方案是通过这个“react-native-blur”获取图像。

如何在 React Native 中模糊 Text 组件？

信息：我只想制作一个用户无法直接看到答案的应用（通过模糊处理）。

【问题讨论】：

react-native-blur 应该可以工作，只要您使用 viewRef 属性并使用它引用您的 Text 组件
或许您可以尝试在文本上放置透明图像并调整blurRadius 属性？我现在无法测试它，所以这只是一个猜测。
我认为您可以为 textInput 中的文本设置动画。

标签： javascript android ios reactjs react-native

【解决方案1】：

如果您不想安装 react-native-blur / expo-blur 或者它不适合您，这是一种模仿 View 中模糊文本外观的解决方法/hack。可以根据需要调整这些值。

<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)"
  }}
/>

【讨论】：

【解决方案2】：

安装 react-native-blur：

npm install react-native-blur

import BlurView from 'react-native-blur';

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

【讨论】：

【解决方案3】：

您可以简单地使用 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>

【讨论】：