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)

3番目に、ウィンドウの幅と高さを画面に表示します

<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)

3番目に、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フックを使用して、現在のウィンドウの寸法を取得します。