React-native锁定视图

Question

我想为非订阅者创建一个模糊的视图，该视图带有锁，当我们单击时，我们将被重定向到订阅页面。对于订阅者，我希望该视图在没有任何过滤器的情况下可见。

我不知道如何在当前视图上方设置模糊视图。我只能使用CSS吗？我看到了Animated包和react-native-blur，但不确定与我的案例是否相关。

我希望我的问题很清楚，希望您能为我提供帮助。无论如何，谢谢您的阅读。

我有这个：

          <View style={styles.statContainer}>
              <ImageBackground
                source={require("../../assets/images/stats-background-5.png")}
                style={styles.statImage}
              >
                <Image
                  source={require("../../assets/images/lock.png")}
                  style={{
                    height: 30,
                    width: 30,
                    justifyContent: "flex-start",
                    alignItems: "flex-start",
                  }}
                ></Image>
                <Text style={styles.statText}>
                  {i18n.t("stats.action.countries")}
                  {"\n"}
                  <AnimateNumber
                    value={this.state.stats.countries}
                    countBy={(
                      this.state.stats.countries / this.state.animateCountBy +
                      1
                    ).toFixed(0)}
                    style={styles.statTextData}
                  />{" "}
                  <Text
                    style={[styles.textimg, styles.measure]}
                    onLayout={this.handleLayout}
                  ></Text>
                </Text>
              </ImageBackground>
            </View>

样式：

statContainer: {
    flex: 1,
    backgroundColor: "transparent",
    marginVertical: 15,
    justifyContent: "center",
    alignItems: "center",
  },
  statText: {
    fontFamily: "FunctionLH",
    color: "white",
    fontSize: 20,
    paddingVertical: 5,
    textAlign: "center",
    alignItems: "center",
    textShadowColor: "rgba(0, 0, 0, 0.90)",
    textShadowOffset: { width: -1, height: 1 },
    textShadowRadius: 10,
  },
  statTextData: {
    fontSize: 40,
    lineHeight: 50,
    paddingVertical: 5,
    textAlign: "center",
    alignItems: "center",
  },
  statImage: {
    height: 100,
    width: "100%",
    position: "relative", // because it's parent
    justifyContent: "center",
    alignItems: "center",
  },

Answer 1

如果我理解正确，并且想要模糊图像，则可以将blurRadius道具用于图像组件：

                <Image
                  source={require("../../assets/images/lock.png")}
                  blurRadius={5}
                  style={{
                    height: 30,
                    width: 30,
                    justifyContent: "flex-start",
                    alignItems: "flex-start",
                  }}
                ></Image>