如何通过独立按钮修改容器背景颜色？React Native开发求助

要实现按钮和粉色容器的关联，核心是在父组件(App)中管理颜色状态，通过props传递给子组件(ListCar)，子组件根据接收的props动态设置背景样式。以下是具体修正和实现步骤：

步骤1：修正App组件的基础错误并完善状态管理 #

原App组件存在语法错误、缺失组件导入、属性名错误等问题，同时优化状态逻辑（直接存储颜色值比布尔值更直观）：

// App.jsx
import ListCar from './ListCar';
import { useState } from 'react';
// 导入React Native缺失的组件
import { StatusBar, View, Button, SafeAreaView } from 'react-native';

export default function App() {
  // 初始背景色为粉色，点击切换为浅蓝色（可自定义其他颜色）
  const [bgColor, setBgColor] = useState('pink');
  
  const toggleColor = () => {
    // 切换颜色：当前是粉色则改为浅蓝色，反之亦然
    setBgColor(prevColor => prevColor === 'pink' ? 'lightblue' : 'pink');
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar style="light"/>
      {/* 修正maxheight为驼峰式maxHeight，Button用style而非className */}
      <View style={{ maxHeight: 100, backgroundColor: "lightgrey", padding: 10 }}>
        <Button onPress={toggleColor} title="Change Background"></Button>
      </View>
      {/* 将颜色状态通过props传递给ListCar组件 */}
      <ListCar bgColor={bgColor} />
    </SafeAreaView>
  );
}

步骤2：修改ListCar组件，接收props并动态设置背景色 #

原ListCar组件存在导出语法错误、未闭合JSX标签、缺失StyleSheet导入等问题，需修正并通过props接收父组件传递的颜色：

// ListCar.jsx
import { View, Image, StyleSheet } from 'react-native';

// 修正导出语法，明确接收props参数
export default function ListCar(props) {
  return (
    {/* 合并基础样式和动态背景色：数组形式合并多个style */}
    <View style={[styles.container, { backgroundColor: props.bgColor }]}>
      <View>
        <Image 
          source={require("./bmw.jpg")} 
          style={{width:150, height:150, resizeMode:'contain'}}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container:{
    marginTop: 20,
    flexDirection: 'row',
    padding:5,
    // 移除固定的backgroundColor，改用props传递的动态值
  },
});

关键逻辑说明 #

• 状态提升：将颜色状态放在父组件(App)中管理，因为按钮和容器分别在父、子组件中，父组件作为共同的状态持有者，能统一控制状态变化。
• props传递：父组件通过bgColor={bgColor}将颜色值传递给子组件，子组件通过props.bgColor获取并应用到样式中。
• 样式合并：React Native中使用数组[基础样式, 动态样式]的方式合并样式，动态样式会覆盖基础样式中的同名属性。

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