React Native：如何用生命周期方法中创建的变量设置View宽度？

嘿，我来帮你理清这个问题：你在componentWillMount里定义的something是局部变量，它的作用域只限于这个方法内部，外面的styles对象根本碰不到它，这就是为啥会报错"something is not defined"。而且styles是组件外部的常量，它在组件初始化之前就已经创建好了，没法直接引用组件内部的变量。

那正确的做法是把这个值存在组件的state里，然后在render的时候动态生成样式，具体步骤如下：

第一步：把变量存到组件state里 #

你可以在构造函数里初始化state，或者用类字段的方式（如果你的项目支持的话）：

class Alarm extends Component {
  constructor(props) {
    super(props);
    // 先给个初始值，避免渲染时出现undefined
    this.state = {
      something: 0
    };
  }

  componentWillMount() {
    // 小提醒：React官方现在更推荐用componentDidMount做这类操作，componentWillMount可能会在未来版本被移除哦
    console.log('check');
    // 更新state，把我们需要的值存进去
    this.setState({ something: 44 });
  }

  // 其他组件方法...
}

第二步：在render里动态应用样式 #

在render方法里，我们基于state的值来设置宽度，可以把基础样式和动态样式合并起来用：

render() {
  const { something } = this.state;
  // 合并基础样式和动态的width属性
  const dynamicMainStyle = {
    ...styles.mainContainer,
    width: `${something}%`
  };

  return (
    <View style={dynamicMainStyle}>
      {/* 这里放你的组件内容 */}
    </View>
  );
}

或者更简洁的写法，直接在style属性里用数组组合：

<View style={[styles.mainContainer, { width: `${this.state.something}%` }]}>
  {/* 组件内容 */}
</View>

额外小提示 #

• 如果something的值是通过异步操作获取的（比如调用接口拿数据），一定要把逻辑放到componentDidMount里，componentWillMount里的异步操作可能会导致组件还没挂载完成就触发更新，容易出问题。
• 现在React的函数组件+hooks是主流写法，如果之后重构的话，用useState和useEffect会更简洁哦～

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