React Native useWindowDimensions

摘要: 在本教程中，您将学习如何使用 React Native useWindowDimensions 钩子获取当前窗口的尺寸。

React Native useWindowDimensions 钩子简介

在移动应用开发中，创建响应式设计以确保跨设备的良好用户体验非常重要。

React Native 支持 useWindowDimensions 钩子，它返回一个包含当前窗口宽度和高度的对象。根据这些信息，您可以创建灵活的布局。

以下示例展示了如何使用 useWindowDimension 钩子

import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';

const App  = () => {
  const { width, height } = useWindowDimensions();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Width: {width}</Text>
      <Text style={styles.text}>Height: {height}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default App;Code language: JavaScript (javascript)

输出

工作原理。

首先，从 react-native 库导入 useWindowDimension 钩子

import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';Code language: JavaScript (javascript)

其次，调用 useWindowDimensions() 钩子并获取窗口的宽度和高度

const { width, height } = useWindowDimensions();Code language: JavaScript (javascript)

第三，在屏幕上显示窗口的宽度和高度

<View style={styles.container}>
   <Text style={styles.text}>Width: {width}</Text>
   <Text style={styles.text}>Height: {height}</Text>
</View>Code language: HTML, XML (xml)

以下示例使用 useWindowDimensions 钩子创建一个响应式布局，根据窗口的宽度更改字体大小和背景颜色

import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';

const App = () => {
  const { width } = useWindowDimensions();

  const isLargeScreen = width > 600;

  return (
    <View style={[styles.container, isLargeScreen ? styles.largeScreen : styles.smallScreen]}>
      <Text style={[styles.text, isLargeScreen ? styles.largeText : styles.smallText]}>
        This is a {isLargeScreen ? 'large' : 'small'} screen.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  largeScreen: {
    backgroundColor: 'lightblue',
  },
  smallScreen: {
    backgroundColor: 'lightgreen',
  },
  text: {
    textAlign: 'center',
  },
  largeText: {
    fontSize: 24,
  },
  smallText: {
    fontSize: 16,
  },
});

export default App;
Code language: JavaScript (javascript)

输出

工作原理。

首先，使用 useWindowDimension 钩子获取当前窗口的宽度

const { width } = useWindowDimensions();Code language: JavaScript (javascript)

其次，创建一个变量，如果宽度大于 600，则返回 true

const isLargeScreen = width > 600;Code language: JavaScript (javascript)

第三，根据 isLargeScreen 的值应用不同的背景和更大的字体大小

<View style={[styles.container, isLargeScreen ? styles.largeScreen : styles.smallScreen]}>
   <Text style={[styles.text, isLargeScreen ? styles.largeText : styles.smallText]}>
       This is a {isLargeScreen ? 'large' : 'small'} screen.
   </Text>
</View>Code language: HTML, XML (xml)

摘要

• 使用 React Native useWindowDimensions 钩子获取当前窗口的尺寸。