React-native заблокированный вид

Question

Я хотел бы сделать вид, размытый для тех, кто не подписан на мое приложение, с блокировкой, когда мы нажимаем, мы перенаправляемся на страницу подписки. Для подписчиков я хочу, чтобы представление было видимым без каких-либо фильтров.

Я не знаю, как настроить размытый вид над моим текущим представлением. Можно только с CSS? Я видел пакет Animated и response-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:

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