如何在componentWillMount()中访问变量？设置全局样式变量显示undefined

老哥，我来给你拆解下你遇到的问题：

首先说为啥打印styles.postImage会显示undefined，核心是两个原因：

1. 你用StyleSheet.create生成的样式对象是被冻结的不可变对象，根本没法直接修改它的属性；而且如果你的styles里压根没提前定义postImage这个样式项，那访问它自然就是undefined了。
2. componentWillMount这个生命周期现在已经被React标记为不安全的了，它是在组件挂载前执行的，你里面的Image.getSize是异步操作，这玩意儿还没跑完，组件可能已经挂载完了，就算你硬改（其实也改不动），也不会触发组件重新渲染。

那怎么正确解决这个问题？给你两个核心思路，再附上修改后的代码：

1. 别直接改StyleSheet，把动态样式存到state里 #

StyleSheet创建的样式是静态的，不能直接修改，正确的做法是把图片的宽高存在组件的state中，然后在render的时候把基础样式和动态样式合并起来使用。

2. 换用更可靠的生命周期：componentDidMount #

componentWillMount已经被废弃了，而且异步操作在这个钩子里面执行很容易出问题，换成componentDidMount（组件挂载完成后执行）才是正确选择，此时执行异步操作后更新state，会触发组件重新渲染，动态样式就能生效了。

修改后的完整代码示例 #

import React from 'react';
import { View, Image, Dimensions, StyleSheet } from 'react-native';

export default class Post extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      postImageUri: { uri: this.props.postImageUri },
      imageHeight: 0, // 初始化图片高度
      imageWidth: Dimensions.get('window').width // 默认宽度设为窗口宽度
    };
  }

  componentDidMount() {
    // 获取图片尺寸的异步操作
    Image.getSize(this.props.postImageUri, (width, height) => {
      // 按比例计算适配窗口宽度后的高度，避免图片变形
      const windowWidth = Dimensions.get('window').width;
      const calculatedHeight = (height / width) * windowWidth;
      // 通过setState更新状态，触发重新渲染
      this.setState({
        imageHeight: calculatedHeight,
        imageWidth: windowWidth
      });
    }, (error) => {
      // 别忘了处理错误情况
      console.error('获取图片尺寸失败啦:', error);
    });
  }

  render() {
    const { imageHeight, imageWidth, postImageUri } = this.state;
    return (
      <View>
        <Image
          source={postImageUri}
          // 用样式数组合并基础样式和动态样式
          style={[
            styles.postImage,
            { width: imageWidth, height: imageHeight }
          ]}
        />
      </View>
    );
  }
}

// 提前定义好基础样式
const styles = StyleSheet.create({
  postImage: {
    resizeMode: 'cover' // 根据你的需求调整基础样式，比如填充模式
  }
});

关于在生命周期中访问变量的说明 #

不管是componentDidMount还是你之前用的componentWillMount，访问组件的props直接用this.props.xxx，访问state用this.state.xxx就行。但要注意：

• 不能直接修改this.state，必须用this.setState()来更新状态，这样才会触发组件重新渲染。
• 如果要访问外部定义的变量（比如你的styles），只要变量在组件的作用域内，直接调用就行，但像StyleSheet这种不可变对象，别想着直接改它的属性。

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