React Native 如何获取窗口宽度和高度

在本文章中，我们将探讨两种不同的方法来获取React Native应用程序中的屏幕宽度和高度。

屏幕尺寸，包括宽度和高度，在设计适应不同设备和方向的用户界面时起着至关重要的作用。通过理解这些尺寸，开发人员可以创建响应式布局，并在不同设备上提供连贯的用户体验。

先决条件

熟悉React Native
React Native组件
React Hooks
Expo CLI
Node.js和npm

创建React Native应用程序的步骤

第1步： 使用Expo CLI创建React Native应用程序

为 <<项目名称>>创建一个新的React Native项目。

npx create-expo-app <<Project Name>>

步骤2：将目录更改为项目文件夹：

cd <<Project Name>>

项目结构

项目的结构将如下所示：

React Native 如何获取窗口宽度和高度

方法1：使用 Dimensions 模块

在这种方法中，利用 Dimensions 模块来获取屏幕的宽度和高度。通过调用 Dimensions.get(‘window’)，可以访问并使用 Text 组件显示这些尺寸。

示例： 在这个示例中，我们使用了上面解释的方法。

// App.js file 
import React from "react"; 
import { 
    View, 
    Text, 
    Dimensions, 
    StyleSheet, 
} from "react-native"; 
  
const App = () => { 
    const { width, height } = Dimensions.get("window"); 
  
    return ( 
        <View style={styles.container}> 
            <Text style={styles.heading}> 
                Geeksforgeeks 
            </Text> 
            <View style={styles.dimensionContainer}> 
                <Text style={styles.dimensionText}> 
                    Screen Width: {width} 
                </Text> 
                <Text style={styles.dimensionText}> 
                    Screen Height: {height} 
                </Text> 
            </View> 
        </View> 
    ); 
}; 
  
const styles = StyleSheet.create({ 
    container: { 
        flex: 1, 
        justifyContent: "center", 
        alignItems: "center", 
        backgroundColor: "#f0f0f0", 
    }, 
    heading: { 
        fontSize: 30, 
        fontWeight: "bold", 
        marginBottom: 30, 
        color: "green", 
    }, 
    dimensionContainer: { 
        backgroundColor: "white", 
        borderRadius: 10, 
        padding: 20, 
        shadowColor: "#000", 
        shadowOffset: { 
            width: 0, 
            height: 2, 
        }, 
        shadowOpacity: 0.25, 
        shadowRadius: 3.84, 
        elevation: 5, 
    }, 
    dimensionText: { 
        fontSize: 18, 
        marginBottom: 10, 
        color: "#666", 
    }, 
}); 
  
export default App;

步骤4：要启动React Native应用程序，请导航到终端或命令提示符，并执行必要的命令。

npx expo start

在Android上运行:

npx react-native run-android

在iOS上运行：

npx react-native run-ios

输出：

React Native 如何获取窗口宽度和高度

方法2：使用useWindowDimensions

在这种方法中，我们将使用useWindowDimensions钩子来轻松访问屏幕的宽度和高度。

示例： 代码定义了一个名为“App”的React Native组件，展示了设备屏幕的尺寸。它从’react-native’导入必要的组件，同时利用useWindowDimensions钩子来获取屏幕的宽度和高度。

// App.js file 
import React from "react"; 
import { 
    View, 
    Text, 
    useWindowDimensions, 
    StyleSheet, 
} from "react-native"; 
  
const App = () => { 
    const { width, height } = useWindowDimensions(); 
  
    return ( 
        <View style={styles.container}> 
            <Text style={styles.text}>Geeksforgeeks</Text> 
            <View style={styles.dimensionContainer}> 
                <Text style={styles.dimensionText}> 
                    Screen Width: {width} 
                </Text> 
                <Text style={styles.dimensionText}> 
                    Screen Height: {height} 
                </Text> 
            </View> 
        </View> 
    ); 
}; 
  
const styles = StyleSheet.create({ 
    container: { 
        flex: 1, 
        justifyContent: "center", 
        alignItems: "center", 
        backgroundColor: "#f0f0f0", 
    }, 
    text: { 
        fontSize: 30, 
        fontWeight: "bold", 
        marginBottom: 20, 
        color: "green", 
    }, 
    dimensionContainer: { 
        backgroundColor: "white", 
        borderRadius: 10, 
        padding: 20, 
        shadowColor: "#000", 
        shadowOffset: { 
            width: 0, 
            height: 2, 
        }, 
        shadowOpacity: 0.25, 
        shadowRadius: 3.84, 
        elevation: 5, 
    }, 
    dimensionText: { 
        fontSize: 18, 
        marginBottom: 10, 
        color: "#666", 
    }, 
}); 
  
export default App;

输出：

React Native 如何获取窗口宽度和高度