@react-native-community/blur在expo上不起作用？

Question

我正在使用Expo和Im使用@react-native-community/blur的<BlurView /> ..它抛出了一个Invariant Violation: requireNativeComponent: "BlurView" was not found in the UIManager.的错误。世博会不支持@react-native-community/blur吗

世博会版本：40.0.0模拟器:安卓

其他注意事项：

我确实尝试过expo-blur，但它并没有像我预期的那样模糊。这就是我使用@react-native-community/blur的原因。

​

    <ImageBackground source={background} style={styles.imageContainer}>
      <SafeAreaView style={styles.container}>
        <StatusBar backgroundColor={THEME.WHITE} barStyle='dark-content' />
        <BlurView style={styles.formContainer}>
          <View style={{ marginBottom: 15 }}>
            <Input
              leftIcon={
                <Icon
                  color={THEME.GREY_6}
                  name='email'
                  type={ICON.MaterialCommunityIcons}
                  variant={VARIANT.MEDIUM}
                />
              }
              placeholder='Email'
              onChangeText={(e) => onChangeEmail(e)}
            />
          </View>
          <View>
            <Input
              leftIcon={
                <Icon
                  color={THEME.GREY_6}
                  name='onepassword'
                  type={ICON.MaterialCommunityIcons}
                  variant={VARIANT.MEDIUM}
                />
              }
              placeholder='Password'
              onChangeText={(e) => onChangeEmail(e)}
            />
          </View>
          <View style={styles.forgotPassContainer}>
            <Text style={styles.text}>Forgot Password?</Text>
          </View>
          <View style={styles.loginButton}>
            <Button label='Login' onPress={handleLogin} />
          </View>
          <View
            style={{
              padding: 15,
              alignItems: 'center',
              borderTopWidth: 0.2,
              marginTop: 15,
            }}
          >
            <Text style={styles.text}>Sign Up</Text>
          </View>
        </BlurView>
      </SafeAreaView>
    </ImageBackground>

​

我想要实现的是让formContainer模糊它的背景。

Answer 1

试试这段代码。即时通信使用expo-blur的BlurView

<View style={{flex: 1}}>
   <BlurView tint="dark" intensity={100} style={{ position: 'absolute', height:'100%', width:'100%,}} />
   <View style={{flex: 1}}>
      //content here
   </View>
</View>

Answer 2

您可以使用Expo BlurView。它非常容易使用。