useWindowDimensions 在样式表中使用 react native

Question

如何在样式表中使用 useWindowDimensions。它总是只在函数内部起作用。我想在本机样式表中使用 useWindowDimensions 获取屏幕高度和宽度。

Answer 1

useWindowDimensions 是一个钩子，所以我们可以在功能组件中使用它。也许还有其他方法，但我想向您推荐这样的方法：

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


const Main = () => {
   const { styles } = useStyle();
    
    return (
        <View style={styles.container}>
            <Text>Dimension Properties inside StyleSheet{'\n'}</Text>
            
            <Text>Heigth: {styles.container.height.toString()}</Text>
            <Text>Width: {styles.container.width.toString()}</Text>
        </View>

    )
}

const useStyle = () => {
    const dimensions = useWindowDimensions();
    console.log('Logging dimensions', dimensions)

    const styles = StyleSheet.create({
      container: {
        height: dimensions.height,
        width: dimensions.width,
        justifyContent: 'center',
        alignItems: 'center',
      },
    })
  
    return { styles }
}

export { Main }

如果对你有帮助，请告诉我。