• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

367
Views
usando @react-native-community/blur con el bloqueo de react-native 0.66.3 en Android

Creé una aplicación de reacción nativa con la CLI de reacción nativa e instalé algunas bibliotecas, después de instalar la biblioteca de reacción-nativa-comunidad/desenfoque y usar el componente BlurView, mi aplicación se estrelló sin ningún error en Android.

esta es la sección de dependencias en el archivo 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" }, ... }

y este es el archivo 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> ); }
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

después de algunos días encontré esta solución, pero esta solución tiene un problema que cuando volvía de otra pantalla a esta pantalla, la aplicación fallaba y se cerraba.

enlace: https://www.higithub.com/Kureev/issue/react-native-blur/452

este problema en react-navigation v6 y react-native-community/blur esto sucede.

solución:

 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> ); }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error