React Native：依赖状态的样式已更新但未正确渲染问题求助

背景说明 #

当前我正尝试实现一个代表开关的TouchableOpacity组件，状态分为'on'和'off'。组件的工作逻辑如下：

• 加载时，以当前日期为键读取AsyncStorage（若存在对应条目，组件状态为'on'（true），否则为'off'（false））
• 子View组件的背景颜色与状态关联（'on'时为绿色；'off'时为透明）
• 点击组件时，在AsyncStorage操作完成前禁用组件
• 若组件处于'off'状态时被点击，则写入新条目，完成后将状态设为'on'
• 若组件处于'on'状态时被点击，则删除对应键的条目，完成后将状态设为'off'

当前代码 #

class Switch extends Component {
    constructor(props) {
            super(props);
            this.state = {
                    switchStatus: null,
                    awaitingIO: false
            };
    }

    componentDidMount() {
            switchStatusOfDate(new Date()).then((response) => {
                    this.setState({ switchStatus: response != null ? true : false });
            }).catch((error) => {
                    // error
            });
    }

    render() {
            const {switchStatus, awaitingIO } = this.state;
            if (switchStatus == null) {
                    return <View style={[styles.circleButton]}>
                            <Text>Loading</Text>
                    </View>;
            }

            const style = {
                    backgroundColor: switchStatus ? 'green' : 'none',
                    ...styles.circleButton
            };

            return (<TouchableOpacity disabled={awaitingIO} onPress={this._updateSwitchStatus.bind(this)} >
                    <View style={style}>
                            {/* Some children */}
                    </View>
            </TouchableOpacity>);
    }

    async _updateSwitchStatus() {
            this.setState({ awaitingIO: true });

            if (this.state.switchStatus) {
                    await unsetSwitchStatusForDate(new Date());
            } else {
                    await setSwitchStatusForDate(new Date());
            }

            this.setState({
                    switchStatus: !this.state.switchStatus,
                    awaitingIO: false,
            });
    }
}

const styles = StyleSheet.create({
        circleButton: {
                flex: 0,
                alignItems: 'center',
                justifyContent: 'center',
                width: 150,
                height: 150,
                borderWidth: 2,
                borderRadius: 75,
                borderColor: 'green'
        },
});

export default Switch;

存储方法 #

function getDateKey(date) {
        let year = date.getFullYear();
        let month = date.getMonth();
        let day = date.getDate();

        return `@${year}${month}${day}`;
}

export async function switchStatusOfDate(date) {
        try {
                return await AsyncStorage.getItem(getDateKey(date));
        } catch (e) {
                // error
        }
}

export async function setSwitchStatusForDate(date) {
        try {
                let value = `${date.getHours()}:${date.getMinutes()}`;
                return await AsyncStorage.setItem(getDateKey(date), value);
        } catch (e) {
                // error
        }
}

export async function unsetSwitchStatusForDate(date) {
        try {
                await AsyncStorage.removeItem(getDateKey(date));
        } catch (e) {
                // error
        }
}

问题描述 #

当前加载时背景颜色设置正确（若点击组件将状态设为'on'并写入条目，重新加载应用后组件背景为绿色）。当状态初始为'off'（无对应条目）时，点击组件背景会从'none'变为绿色，这也正常。但后续所有点击都无法改变背景颜色。

状态设置正确，AsyncStorage方法也能正常工作。我已在render()中打印switchStatus和style，返回值正确，但实际渲染无变化（始终为绿色）。

使用Expo手机端元素检查器发现，View的backgroundColor属性已设为'none'，但实际背景仍为绿色，且与子组件无关（移除子组件后问题依旧）。

编辑说明 #

1. 为让代码独立可懂，我修改了部分变量名，其余未改动（若发现相关错误请指出）。
2. 更新：发现元素检查器显示样式已应用，但渲染未生效。

解决方案 #

核心问题有两个：

1. backgroundColor: 'none'是非法值：React Native中没有'none'这个颜色取值，要设置透明背景应该用'transparent'。虽然元素检查器显示该属性被应用，但RN渲染引擎无法正确解析，导致之前的绿色背景残留。
2. 样式合并顺序易引发优先级问题：当前先定义backgroundColor再展开基础样式，虽然基础样式里没有冲突属性，但规范写法应先展开基础样式，再覆盖自定义属性，避免后续样式冲突。

修改render方法中的样式定义：

const style = {
  ...styles.circleButton,
  backgroundColor: switchStatus ? 'green' : 'transparent'
};

另外，_updateSwitchStatus中切换状态时，用函数式更新更稳妥（避免依赖异步的this.state取值）：

this.setState(prevState => ({
  switchStatus: !prevState.switchStatus,
  awaitingIO: false
}));

修改后，组件状态切换时背景色会正确在绿色和透明之间切换。

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