React Native：在 UIManager 中找不到“BlurView”

Question

我在尝试实施@react-native-community/blur (https://github.com/Kureev/react-native-blur) 时遇到以下错误。

我试过从 4.3.0 降级到 4.2.0，然后降级到 4.1.0，但没有成功。

我可以添加的 node_modules 中是否可能缺少一个文件？

或者是否有您推荐使用的另一个与 React Native 和 EXPO 兼容的库

 ERROR  Invariant Violation: requireNativeComponent: "BlurView" was not found in the UIManager.

This error is located at:
    in BlurView
    in Unknown (created by Post)
    in RCTView (created by View)
    in View
    in NativeWind.View
    in Unknown (created by Post)
    in RCTView (created by View)
    in View
    in NativeWind.View
    in Unknown (created by Post)
    in Post (created by HomeScreen)
    in RCTView (created by View)
    in View (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView
    in NativeWind.ScrollView
    in Unknown (created by HomeScreen)
    in RCTView (created by View)
    in View
    in NativeWind.View
    in Unknown (created by HomeScreen)
    in HomeScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by TabNavigator)
    in TabNavigator (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by RootNavigator)
    in RootNavigator (created by App)
    in RCTView (created by View)
    in View (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

Answer 1

尝试删除 ./node_modules、./ios/Pods 并重新安装。

如果您的 Mac 正在运行 Apple Silicon 芯片，请使用以下命令而不是仅仅安装 pod：

arch -x86_64 pod install

万一多次尝试还是不行，我建议使用@shopify/react-native-skia 另一种方式来制作模糊的 UI。我的项目也在创建 blurView 时使用了这个包。 希望我的回答能帮到你

编辑：我想在这里添加我的实现

import {Canvas, Mask, BlurMask, Circle, Rect} from '@shopify/react-native-skia';

const BlurView = (props: BlurViewProps) => {
  const {container, cx, r, blur, styleBlur, color, size} = props;

  return (
    <Canvas style={[styles.container, container]}>
      <Mask
        mask={
          <Circle cx={cx || 65} cy={cx || 65} r={r || 45}>
            <BlurMask blur={blur || 10} style={styleBlur || 'normal'} />
          </Circle>
        }>
        <Rect
          x={0}
          y={0}
          width={size || 130}
          height={size || 130}
          color={color || 'white'}
        />
      </Mask>
    </Canvas>
  );
};


const styles = StyleSheet.create({
  container: {
    width: 130,
    height: 130,
  },
});