React Native StyleSheet引用组件内动态变量报错如何解决

StyleSheet.create 在模块加载阶段、组件函数执行前就会完成初始化，直接在样式表里引用组件内部变量会触发两个问题：

• 定义在组件函数内部的aspectHeight属于函数作用域局部变量，组件外的样式表代码无法访问该变量，直接触发变量未找到的报错
• RN的StyleSheet创建后为静态结构，就算把变量挪到组件外层定义，遇到屏幕旋转、折叠屏状态切换、分屏模式等窗口尺寸变化场景，预计算的高度也不会自动更新，会导致布局错位。

使用React Native官方提供的useWindowDimensions钩子获取响应式窗口尺寸，该钩子会在窗口尺寸变化时自动触发组件重渲染，静态固定样式保留在StyleSheet中，动态计算的高度通过行内样式传入即可，兼顾性能和可维护性。
修正后可直接运行的代码：

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

export default function PropertyTile() {
  // 自动监听窗口尺寸变化，无需手动绑定事件
  const { width: deviceFullWidth } = useWindowDimensions()
  const deviceWidth = deviceFullWidth - 16
  const aspectHeight = (deviceWidth / 1.78) + 1

  return (
    <View style={styles.container}>
      {/* 静态样式从StyleSheet引用，动态高度通过行内样式合并传入 */}
      <View style={[styles.imageContainer, { height: aspectHeight }]}>
        <Image style={styles.mainImage} source={require('../../assets/luxury-home-1.jpeg')}/>
      </View>
      <View className='content-container'>
        <Text>Property Tile</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    padding: 8
  },
  imageContainer: {
    width: '100%',
    backgroundColor: 'skyblue'
  },
  mainImage: {
    width: '100%',
    height: '100%'
  }
})

如果不希望直接写行内样式，也可以在组件内部完成样式合并后再传入，逻辑和上述方案一致：

// 组件内部计算完成后合并样式
const mergedImageContainerStyle = [
  styles.imageContainer,
  { height: aspectHeight }
]

// JSX中直接引用即可
// <View style={mergedImageContainerStyle}>

不要尝试将动态运行时计算的值硬写入StyleSheet，静态样式表本身就不是为动态变化值设计的，强行改造反而会引发额外性能损耗、布局不更新等问题。

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