React Native中navigation.navigate与setState同时使用时颜色更新滞后问题

• 重复维护了两份状态：你自行维护的tab状态和React Navigation内部持有的路由状态，二者更新时机不同步，是出现滞后的核心原因
• 状态更新与导航跳转存在调度优先级差：React Native中导航跳转的执行优先级高于普通状态更新渲染，跳转操作会抢占渲染资源，导致颜色更新的渲染被推迟，视觉上就会出现滞后1次点击的表现
• 额外维护的loaded状态完全是冗余逻辑，没有实际作用反而增加了状态同步的负担

推荐直接复用React Navigation内部的路由状态，不需要自行维护tab选中状态，从根源避免状态不同步的问题：

import React from "react";
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native';
import { useNavigation, useNavigationState } from '@react-navigation/native';
// 补全你项目中Icon组件的导入即可

const stylesCustom = StyleSheet.create({
    navItemView: {
        position: 'relative',
        bottom: 10,
        display: 'flex',
        alignItems: 'center'
    },
    colorPink: {
        color: 'pink'
    }
});

const MainContent = () => {  
    const navigation = useNavigation();
    // 直接从导航状态获取当前激活的tab名，不需要自行维护状态
    const currentTab = useNavigationState(state => state.routes[state.index].name);

    return (
        <View style={[ stylesCustom.mainContainer ]}>
            <TouchableWithoutFeedback onPress={() => navigation.navigate('Home')}>
                <View style={[stylesCustom.navItemView]}>
                    <Icon name='home-outline' type='material-community' color={currentTab === 'Home' ? 'pink' : '#757781'} size={35} />
                    <Text style={[ styles.fontSmall, styles.textGray, styles.mt5, currentTab === 'Home' && stylesCustom.colorPink]}>Home</Text>
                </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={() => navigation.navigate('Grow')}>
                <View style={[stylesCustom.navItemView]}>
                    <Icon name='flower-outline' type='material-community' color={currentTab === 'Grow' ? 'pink' : '#757781'} size={35} />
                    <Text style={[ styles.fontSmall, styles.textGray, styles.mt5, currentTab === 'Grow' && stylesCustom.colorPink]}>Grow</Text>
                </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={() => navigation.navigate('Events')}>
                <View style={[stylesCustom.navItemView]}>
                    <Icon name='calendar-clock' type='material-community' color={currentTab === 'Events' ? 'pink' : '#757781'} size={35} />
                    <Text style={[ styles.fontSmall, styles.textGray, styles.mt5, currentTab === 'Events' && stylesCustom.colorPink]}>Events</Text>
                </View>
            </TouchableWithoutFeedback>
        </View>     
    );
}

可以使用flushSync强制状态更新同步完成后再执行跳转，避免优先级抢占导致的渲染滞后：

1. 导入flushSync：
   import { flushSync } from 'react';
2. 修改onPress逻辑，同时删除原有的loaded状态和监听tab的useEffect：

<TouchableWithoutFeedback onPress={() => {
  flushSync(() => setTab('Home'))
  navigation.navigate('Home')
}}>

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