react-native - 媒体查询在 react-native 中不起作用

Question

我的第一个媒体查询(“@media only screen and (min-device-width:320) and (max-device-width:359)”)不起作用，否则它们都响应正确。

{   "@media only screen and (min-device-width:295) and (max-device-width:359)": {

        button: {
            height:70,
            margin:4
        },
        buttonText: {
            fontSize :12
        },      
    }
},
{   "@media only screen and (min-device-width:360) and (max-device-width:374)": {
        button: {
            height:86,
            margin:6
        },
        buttonText: {
            fontSize :15
        },      
    }
},

{   "@media only screen and (min-device-width:375) and (max-device-height:811)": 
   {
        button: {
            height:86,
            margin:6
        },
        buttonText: {
            fontSize :15
        },
    }   
}

Answer 1

有很多库可以在 React-Native 中使用媒体查询，例如 React Native Responsive UI , React Native CSS Media Query Processor ， 等等。
最好的方法之一是使用@expo/match-media，它使您能够将大多数您最喜欢的响应式 React 库与 Expo for iOS、Android 和 Web 一起使用，它还可以观察使用分屏功能的 Android 设备的屏幕尺寸.
首先，安装软件包:

npm install @expo/match-media react-responsive

然后在项目的根目录导入包:

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import "@expo/match-media";
import { useMediaQuery } from "react-responsive";

export default function App() {
    const isTabletOrMobileDevice = useMediaQuery({
        query: "(max-device-width: 1224px)",
    });
    const isDeviceWidth295_359 = useMediaQuery({
        query: "(min-device-width:295) and (max-device-width:359)",
    });
    const isDeviceWidth375_811 = useMediaQuery({
        query: "(min-device-width:375) and (max-device-height:811)",
    });
    const isDeviceWidth360_374 = useMediaQuery({
        query: "(min-device-width:360) and (max-device-width:374)",
    });

    if (isTabletOrMobileDevice) {
        if (isDeviceWidth295_359) {
            return (
                <View style={styles.media295_359.button}>
                    <Text style={styles.media295_359.buttonText}>Mobile Device</Text>
                </View>
            );
        } else if (isDeviceWidth360_374) {
            return (
                <View style={styles.media360_374.button}>
                    <Text style={styles.media360_374.buttonText}>Mobile Device</Text>
                </View>
            );
        } else if (isDeviceWidth375_811) {
            return (
                <View style={styles.media375_811.button}>
                    <Text style={styles.media375_811.buttonText}>Mobile Device</Text>
                </View>
            );
        } else {
            return (
                <View>
                    <Text>Mobile Device</Text>
                </View>
            );
        }
    }
    return <Text>Desktop</Text>;
}
const styles = StyleSheet.create({
    media295_359: {
        button: {
            height: 70,
            margin: 4,
        },
        buttonText: {
            fontSize: 12,
        },
    },
    media360_374: {
        button: {
            height: 86,
            margin: 6,
        },
        buttonText: {
            fontSize: 15,
        },
    },
    media375_811: {
        button: {
            height: 86,
            margin: 6,
        },
        buttonText: {
            fontSize: 15,
        },
    },
});