在 android 上使用带有 react-native 0.66.3 崩溃的 @react-native-community/blur答案

【问题标题】：using @react-native-community/blur with react-native 0.66.3 crash on android在 android 上使用带有 react-native 0.66.3 崩溃的 @react-native-community/blur
【发布时间】：2021-12-25 22:36:21
【问题描述】：

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

这是 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>
  );
}

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案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>
  );
}

【讨论】：