react-native - navigation.navigate() 在本机反应中与 setState() 不同时工作

Question

我在 react native 应用程序的底部创建了一个导航栏，该导航栏运行良好，直到我添加了更改单击的图标和文本颜色的功能。

我可以让导航在没有颜色变化的情况下工作，并且我可以在没有navigation.navigate() 的情况下让颜色变化顺利运行，但由于某种原因我不能同时进行这两种操作。

当我将两者结合在一起时，navigation.navigate 可以工作，但颜色至少落后 1 次。

我以为我可以通过更新选项卡状态然后触发 useEffect 导航到单击的选项卡来触发颜色更改，但这不起作用。

我尝试了上下文，但没有任何运气，这对于如此简单的功能来说是不必要的。图我一定遗漏了一些我没有看到的明显东西。

  import React, {useEffect, useState} from "react";
  import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native';
  import { useNavigation } from '@react-navigation/native';

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

  const MainContent = () => {  
  const navigation = useNavigation();

  const [tab, setTab] = useState('Home')
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    if(loaded) {
      navigation.navigate(tab);
    }
    setLoaded(true);
  }, [tab])

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

标签： react-native