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>

React-native 锁定视图

React-native locked view

css

view

blur

subscription

react-native