在 React Native 中实现自定义约束模糊效果的教程

import React from 'react';
import { View, Text, Image, TouchableOpacity, Platform, StyleSheet } from 'react-native';
import { BlurView } from '@react-native-community/blur';

// 假设 icon 和 title, user 是通过 props 传入的
const CustomBlurredHeader = ({ icon, title, user }) => {
    // 基础样式定义，可以根据实际需求调整
    const styles = StyleSheet.create({
        box_Wrappeer: { // 这个样式用于内部内容容器，以及 iOS 上的 BlurView
            flexDirection: 'column',
            padding: 15,
            borderRadius: 10,
            overflow: 'hidden', // 确保内容不会溢出圆角边界
            backgroundColor: 'rgba(255,255,255,0.3)', // iOS上BlurView的背景色，Android上作为内容容器的背景色
            // 针对Android内部包装器，可以设置flex: 1 或固定尺寸
        },
        box_wrapper_android: { // Android 外部包装器
            borderRadius: 10,
            overflow: 'hidden', // 确保模糊效果在圆角内
            // 根据需要设置宽度和高度，或让其自适应内容
            // 例如：width: '100%', height: 100,
        },
        box_inner_wrapper_android: { // Android 内部 BlurView 的样式
            flex: 1, // 让 BlurView 填充其父容器 (box_wrapper_android)
            // blurType 和 blurAmount 会在这里应用
        },
        row_1: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginBottom: 10,
            first_part: {
                flexDirection: 'row',
                alignItems: 'center',
            },
            image: {
                width: 30,
                height: 30,
                marginRight: 10,
                borderRadius: 15,
            },
            text: {
                fontSize: 16,
                fontWeight: 'bold',
                color: '#333',
            },
            second_part: {
                padding: 5,
            },
            image2: {
                width: 20,
                height: 20,
            }
        },
        row_2: {
            text: {
                fontSize: 14,
                color: '#666',
            }
        }
    });

    // 内部内容组件，避免重复代码
    const Content = () => (
        <View style={styles.box_Wrappeer}> {/* 注意这里 iOS 和 Android 样式复用，但作用不同 */}
            <View style={styles.row_1}>
                <View style={styles.row_1.first_part}>
                    <Image style={styles.row_1.image} source={icon} />
                    <Text style={styles.row_1.text}>{title}</Text>
                </View>
                <TouchableOpacity style={styles.row_1.second_part}>
                    <Image style={styles.row_1.image2} source={require('../../assets/cross_icon.png')} />
                </TouchableOpacity>
            </View>
            <View style={styles.row_2}>
                <Text style={styles.row_2.text}>
                    {user}
                </Text>
            </View>
        </View>
    );

    return (
        <TouchableOpacity>
            {Platform.OS === 'ios' ? (
                <BlurView
                    style={styles.box_Wrappeer} // iOS上BlurView直接应用内容容器样式
                    blurType="light"
                    blurAmount={10}
                >
                    <Content />
                </BlurView>
            ) : (
                <View style={styles.box_wrapper_android}> {/* Android 外部包装器 */}
                    <BlurView
                        style={styles.box_inner_wrapper_android} // Android BlurView 应用内部包装器样式
                        blurType="light"
                        blurAmount={10}
                    >
                        <Content /> {/* 实际内容 */}
                    </BlurView>
                </View>
            )}
        </TouchableOpacity>
    );
};

export default CustomBlurredHeader;