React Native导出Dimension宽高偏小问题求助

Great question! The issue you're seeing happens because when your style.js module loads (usually at app startup), Dimensions.get('window') returns the initial screen dimensions that might not reflect the final rendered size—especially if there are status bars, navigation bars, or delayed layout adjustments. Static style objects in style.js don't update dynamically, which is why the width is off when imported.

You absolutely can create a reusable way to get up-to-date screen dimensions for all your screen components—you just need to avoid static values and use dynamic approaches instead. Here are a few solid solutions:

1. Create a Custom Hook (Recommended) #

This is the cleanest React Native-friendly approach, as it automatically handles dimension changes (like screen rotation) and gives components fresh values when they render.

// hooks/useScreenDimensions.js
import { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';

export const useScreenDimensions = () => {
  // Initialize with current dimensions
  const [screenSize, setScreenSize] = useState(Dimensions.get('window'));

  useEffect(() => {
    // Listen for dimension changes
    const handleDimensionChange = ({ window }) => {
      setScreenSize(window);
    };

    const subscription = Dimensions.addEventListener('change', handleDimensionChange);
    
    // Clean up the listener when component unmounts
    return () => subscription?.remove();
  }, []);

  return screenSize;
};

Then use it in any screen component:

// YourScreenComponent.js
import { View } from 'react-native';
import { useScreenDimensions } from '../hooks/useScreenDimensions';

export default function YourScreen() {
  const { width, height } = useScreenDimensions();
  
  // You can define the style inline or memoize it
  const containerStyle = {
    width,
    height,
    // Add other styles like backgroundColor, padding, etc.
  };

  return <View style={containerStyle}>Your content here</View>;
}

2. Export a Dynamic Style Function #

If you prefer keeping styles in a separate file, export a function that calculates the style on demand (when the component renders) instead of a static object:

// styles.js
import { Dimensions } from 'react-native';

export const getFullScreenContainerStyle = () => {
  const { width, height } = Dimensions.get('window');
  return {
    width,
    height,
    // Add default styles like backgroundColor: 'white'
  };
};

Use it in components by calling the function inside the component (not at the top level):

// YourScreenComponent.js
import { View } from 'react-native';
import { getFullScreenContainerStyle } from './styles';

export default function YourScreen() {
  // Calculate the style when the component renders
  const containerStyle = getFullScreenContainerStyle();

  return <View style={containerStyle}>Your content here</View>;
}

3. Global State with Dimension Listening #

If you want a single source of truth across your app, you can use the Context API to store and update screen dimensions:

// context/ScreenDimensionsContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import { Dimensions } from 'react-native';

const ScreenDimensionsContext = createContext();

export const ScreenDimensionsProvider = ({ children }) => {
  const [dimensions, setDimensions] = useState(Dimensions.get('window'));

  useEffect(() => {
    const handleChange = ({ window }) => setDimensions(window);
    const subscription = Dimensions.addEventListener('change', handleChange);
    return () => subscription?.remove();
  }, []);

  return (
    <ScreenDimensionsContext.Provider value={dimensions}>
      {children}
    </ScreenDimensionsContext.Provider>
  );
};

export const useScreenDimensions = () => useContext(ScreenDimensionsContext);

Wrap your app with the provider in App.js, then use the useScreenDimensions hook anywhere just like solution 1.

Why Static Styles Fail #

When you export a static style object from style.js, it's evaluated once when the module is first imported (usually when the app starts). At that point, the app might not have finished rendering all UI elements (like status bars), so Dimensions.get('window') returns an incomplete size. Dynamic approaches ensure you get the current, accurate dimensions whenever the component needs them.

So to answer your question: You don't have to repeat Dimensions.get in every component—just wrap it in a reusable hook, function, or global context, and you'll get consistent, up-to-date screen sizes across all your screens.

内容的提问来源于stack exchange，提问作者Phil Mok