as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
感谢您的访问。此页面目前仅提供英语版本。我们正在开发中文版本。谢谢您的理解。

useKeplerWindowDimensions

useKeplerWindowDimensions returns an array of DisplayMetricsKepler entries for each surface that currently exists.

DisplayMetricsKepler Type:

/**
 * Kepler window Dimensions with module name
 * @platform kepler
 */
export interface DisplayMetricsKepler {
  width: number;
  height: number;
  scale: number;
  fontScale: number;
  moduleName: string; // the name used to register the main React app component in the React Native AppRegistry for the surface (window/screen).
}

import { useKeplerWindowDimensions } from 'react-native';

useKeplerWindowDimensions automatically updates values when any surface's size changes. To get a surface window's width and height use the width and height properties:


const windowWidth = useWindowDimensions()[<index>].width;
const windowHeight = useWindowDimensions()[<index>].height;

The available array indexes depends on the number of surfaces that exist. If there is no surface the array is empty.

If there is only one surface, the index for that surface is zero (0). If there are multiple surfaces, the array has an entry for each surface.

The moduleName property for each entry matches the AppRegistry name for the app component that corresponds to a surface.

Example


import React from "react";
import { View, StyleSheet, Text, useKeplerWindowDimensions } from "react-native";

const App = () => {
  const windows = useKeplerWindowDimensions();
  return (
    <View style={styles.container}>
        <Text style={styles.displayText}>Module states: </Text>
            {windows && windows.map((element: { width: number; height: number; scale: number; fontScale: number; moduleName: string; }, i: number) =>
                <Text key={i} style={styles.commentText}>
                    {`App module: ${element.moduleName}, height: ${element.height}, width: ${element.width}`}
                 </Text>
            )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  displayText: {
     fontSize: 20,
     fontWeight: "bold"
  },
  commentText: {
     fontSize: 16
  }
});

export default App;

Properties

fontScale


useKeplerWindowDimensions()[<index>].fontScale;

The scale of the font currently used. Some operating systems allow users to scale their font sizes larger or smaller for reading comfort.

This prop allows you to determin what the current font scale is. The available array indexes depends on the number of surfaces that exist.


height


useKeplerWindowDimensions()[<index>].height;

The height in pixels of the window or screen that your app occupies. The available array indexes depends on the number of surfaces that exist.


scale


useKeplerWindowDimensions()[<index>].scale;

The pixel ratio of the device that your app is running on. The available array indexes depends on the number of surfaces that exist.

A value of 1 indicates PPI/DPI of 96 (76 on some platforms). 2 indicates a Retina or high DPI display.


width


useKeplerWindowDimensions()[<index>].width;

The width in pixels of the window or screen that your app occupies. The available array indexes depends on the number of surfaces that exist.

moduleName


useKeplerWindowDimensions()[<index>].moduleName;

The name of the module for the surface that corresponds with this entry. The available array indexes depends on the number of surfaces that exist.


Last updated: Sep 30, 2025