使用 @react-native-community/blur 和 react-native 0.66.3 在 android 上崩溃

Question

我使用 react-native CLI 创建了一个 react-native 应用程序并安装了一些库，在安装 react-native-community/blur 库并使用 BlurView 组件后，我的应用程序没有任何错误在 ZC31B32364CE19CA8ZFCD150A417ECCE58 上崩溃

这是 package.json 文件中的依赖项部分：

{
...
  "dependencies": {
    "@react-native-community/blur": "^3.6.0",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0",
    "react-native-vector-icons": "^9.0.0"
  },
...
}

这是 App.js 文件：

import React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import { BlurView } from "@react-native-community/blur";
import styles from './styles';

export default function App() {
  return (
    <View style={styles.container}>
      <BlurView
        style={styles.absolute}
        blurType="light"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />

      <TouchableOpacity>
        <Text>Home</Text>
      </TouchableOpacity>
    </View>
  );
}

Answer 1

几天后我找到了这个解决方案，但是这个解决方案有一个问题，当从另一个屏幕返回到这个屏幕应用程序崩溃并关闭时。

链接： https://www.higithub.com/Kureev/issue/react-native-blur/452

react-navigation v6 和 react-native-community/blur 上的这个问题会发生。

解决方案：

import React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import { BlurView } from "@react-native-community/blur";
import styles from './styles';

export default function App() {
  const [viewRef, setViewRef] = useState(null);
  const messageRef = useRef(null);

  const onViewLoaded = () => {
    setViewRef(findNodeHandle(messageRef.current));
  };

  return (
    <View style={styles.container}>
      <View
        style={styles.body}
        ref={containerRef => {
          messageRef.current = containerRef;
        }}
        onLayout={onViewLoaded}
      />
      {(viewRef || Platform.OS === 'ios') && (
        <BlurView
          style={styles.absolute}
          blurType="light"
          blurAmount={10}
          reducedTransparencyFallbackColor="white"
        />
      )}
      <TouchableOpacity>
        <Text>Home</Text>
      </TouchableOpacity>
    </View>
  );
}