Question

我的第一个媒体查询（“ @media only屏幕和（min-device-width：320）和（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库与iOS，Android和Web上的Expo一起使用，还可以观察使用split的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,
        },
    },
});

Answer 2

我不确定，但是我知道React-Native在Styles中不支持媒体查询。也许您可以考虑为此使用外部组件。例如，styled-components包含媒体查询。您可以查看其文档。

Answer 3

您可以使用react native media queries软件包。

媒体查询在本机中不起作用

3 个答案: