使用Redux Toolkit时无法在跨组件读取状态的问题

你收到的Can't find variable: color错误，核心问题是样式定义的作用域错误：

• const { color } = useSelector(...)是NoteTile组件内部的局部变量，只能在组件函数体内访问
• 而StyleSheet.create是在组件外部定义的，属于全局作用域，根本无法获取组件内部的Redux状态变量

你的Redux整体配置（slice、store、Provider包裹）都是正确的——ColorPalette组件能正常读取状态就是证明，问题仅出在NoteTile的样式写法上。

解决方案1：组件内使用动态内联样式 #

把需要依赖Redux状态的样式，移到组件函数体内，作为动态计算的样式对象：

import { StyleSheet, Text, View, Pressable } from 'react-native'
import React from 'react'
import { useSelector } from 'react-redux'

const NoteTile = ({title, det, pressFunc}) => {
    const { color } = useSelector((state) => state.colorizer);
    // 把依赖状态的样式移到组件内部
    const tileStyles = {
        ...styles.tileContainer,
        backgroundColor: color.bg
    }

    return (
        <View style={tileStyles} >
            <Pressable  android_ripple={{color: '#cccccc'}} 
                        style={styles.button}
                        onPress={pressFunc} >
                <View style={[styles.innerContainer]} >
                    <Text style={styles.title} >{title}</Text>
                    <Text style={styles.details} >{det}</Text>
                </View>
            </Pressable>
        </View>
    )
}

export default NoteTile

// 只定义静态样式
const styles = StyleSheet.create({
    tileContainer: {
        flex: 1,
        margin: 10,
        height: 100,
        maxHeight: 400,
        borderRadius: 30,
        elevation: 5,
        overflow: 'hidden',
    },
    button: {
        flex: 1,
        padding: 15
    },
    innerContainer: {
        flex: 1,
        justifyContent: 'space-between'
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold'
    },
    details: {
        fontSize: 14,
        opacity: 0.7
    }
})

解决方案2：用useMemo缓存动态样式（推荐） #

如果担心重复渲染性能问题，可以用useMemo缓存动态样式，只有当color变化时才重新计算：

import { StyleSheet, Text, View, Pressable } from 'react-native'
import React, { useMemo } from 'react'
import { useSelector } from 'react-redux'

const NoteTile = ({title, det, pressFunc}) => {
    const { color } = useSelector((state) => state.colorizer);
    
    // 用useMemo缓存动态样式
    const tileStyles = useMemo(() => ({
        ...styles.tileContainer,
        backgroundColor: color.bg
    }), [color.bg])

    return (
        <View style={tileStyles} >
            <Pressable  android_ripple={{color: '#cccccc'}} 
                        style={styles.button}
                        onPress={pressFunc} >
                <View style={[styles.innerContainer]} >
                    <Text style={styles.title} >{title}</Text>
                    <Text style={styles.details} >{det}</Text>
                </View>
            </Pressable>
        </View>
    )
}

export default NoteTile

// 静态样式保持不变
const styles = StyleSheet.create({
    tileContainer: {
        flex: 1,
        margin: 10,
        height: 100,
        maxHeight: 400,
        borderRadius: 30,
        elevation: 5,
        overflow: 'hidden',
    },
    button: {
        flex: 1,
        padding: 15
    },
    innerContainer: {
        flex: 1,
        justifyContent: 'space-between'
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold'
    },
    details: {
        fontSize: 14,
        opacity: 0.7
    }
})

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