React Native Expo：点击嵌套Button修改View样式报错如何解决？

问题重现 #

你尝试通过点击View内的Button修改其背景色，当前代码如下：

import { Button, View } from 'react-native';

var styles = {
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue'
  }
};

export default function App() {
  return (
    <View style={styles.container}>
      <Button title='button' onPress={() => styles.A.backgroundColor = 'yellow'} />
    </View>
  );
}

点击按钮时出现错误：undefined is not an object (evaluating 'styles.A.backgroundColor = 'yellow'')

错误原因 #

• styles.A不存在：你的styles对象里仅定义了container属性，没有A属性，直接访问styles.A会返回undefined，无法修改其backgroundColor。
• 直接修改styles无法触发UI更新：React组件的界面更新依赖状态（state）变化，直接修改普通的styles对象不会让React感知到变化，即便属性修改正确，界面也不会同步更新。

修复方案 #

使用React的useState Hook管理背景色状态，通过更新状态触发组件重渲染，从而修改View样式：

import { Button, View } from 'react-native';
import { useState } from 'react';

// 保留基础固定样式
const baseStyles = {
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
};

export default function App() {
  // 初始化背景色状态为蓝色
  const [bgColor, setBgColor] = useState('blue');

  return (
    <View style={{...baseStyles.container, backgroundColor: bgColor}}>
      <Button 
        title='改变背景色' 
        onPress={() => setBgColor('yellow')} 
      />
    </View>
  );
}

说明 #

• useState是React用于管理组件内部状态的Hook，调用后会返回当前状态值（bgColor）和更新状态的函数（setBgColor）。
• 将基础样式与动态背景色合并后传递给View的style属性，点击按钮调用setBgColor更新状态时，组件会自动重渲染，View的背景色随之改变。

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