React Navigation表单提交后意外跳转至首个Tab页面求助

我通过React Navigation的bottom tab navigator创建了4个页面，底部菜单负责页面导航。其中Weight Tracking页面包含一个表单，提交表单时应用会自动跳转到Tab列表的首个页面Dashboard，但我并未编写任何显式跳转代码，期望提交后停留在当前页面，需要排查问题原因。

相关代码 #

Tab导航代码 #

const Tab = createBottomTabNavigator();

const AppStack = () => {
  return (
    <Tab.Navigator tabBar={(props) => <BottomMenu {...props} />}>
      <Tab.Screen name="Dashboard" component={DashboardScreen} />
      <Tab.Screen name="Weight Tracking" component={WeightTrackingScreen} />
      <Tab.Screen name="Period Tracking" component={PeriodTrackingScreen} />
      <Tab.Screen name="Food Tracking" component={FoodTrackingScreen} />
    </Tab.Navigator>
  );
};

Weight Tracking页面代码 #

const WeightTrackingScreen = ({navigation}) => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
                <WeightInputForm></WeightInputForm>
            </View>
        </SafeAreaView>
    );
}

Weight Input Form代码 #

const WeightInputForm = () => {
  const {userToken, setIsLoading} = useContext(AuthContext);
  const [numberInput, setNumberInput] = useState('');
  const [dateInput, setDateInput] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(true);

  const handleNumberInputChange = (value) => {
    if (/^\d{0,3}(\.\d{0,1})?$/.test(value) || value === '') {
      setNumberInput(value);
    }
  };

  const handleDateInputChange = (event, selectedDate) => {
    setShowDatePicker(Platform.OS === 'ios'); // Hide on iOS immediately, on Android, let the user confirm
    if (selectedDate) {
      setDateInput(selectedDate);
    }
  };

  async function createWeight() {
    setIsLoading(true);
    try {
      const response = await fetch('http://localhost:5000/weights', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": userToken,
        },
        body: JSON.stringify({
          "weight": {
            "weight_number": numberInput,
            "date": dateInput
          }
        })
      });
  
      const data = await response.json();
      console.log('Data:', data);
  
    } catch (error) {
      console.error('Error:', error);
    }

    setIsLoading(false);
  }

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          value={numberInput}
          onChangeText={handleNumberInputChange}
          placeholder="Enter Number"
        />
      </View>

      {showDatePicker && (
        <DateTimePicker
          value={dateInput}
          mode="date"
          display="default"
          onChange={handleDateInputChange}
        />
      )}


      <Button title="Submit" onPress={createWeight} />
    </View>
  );
};

底部菜单代码 #

const BottomMenu = ({ navigation }) => {
  const handleOptionPress = (routeName) => {
    navigation.navigate(routeName);
  };

  return (
    <View style={styles.menuContainer}>
      <TouchableOpacity style={styles.menuItem} onPress={() => handleOptionPress('Weight Tracking')}>
        <Text>⚖️</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.menuItem} onPress={() => handleOptionPress('Period Tracking')}>
        <Text>🩸</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.menuItem} onPress={() => handleOptionPress('Food Tracking')}>
        <Text>🍛</Text>
      </TouchableOpacity>
    </View>
  );
};

问题原因排查 #

1. 自定义BottomMenu未对接React Navigation的Tab状态
   你自定义的BottomMenu完全忽略了Tab.Navigator传递的state和descriptors等核心props，既没有渲染Dashboard的导航按钮，也没有根据当前活跃路由标记选中状态。当表单提交时，setIsLoading触发全局状态更新，导致AppStack重新渲染，Tab.Navigator因无法通过自定义tabBar获取正确的活跃路由状态，默认重置到第一个Tab页面（Dashboard）。

2. 状态更新引发的组件重渲染异常
   表单提交时调用了setIsLoading(true)和setIsLoading(false)，会触发所有使用AuthContext的组件重新渲染。如果AppStack或其上层组件依赖AuthContext，重渲染过程中Tab导航的内部状态会因自定义tabBar的实现缺陷而丢失，最终跳转到初始路由。

解决方案 #

方案1：修复自定义BottomMenu（根本解决） #

修改BottomMenu，使用Tab.Navigator传递的props，渲染所有四个Tab按钮并正确标记活跃状态：

const BottomMenu = ({ navigation, state, descriptors }) => {
  const handleOptionPress = (routeName) => {
    navigation.navigate(routeName);
  };

  // 定义所有Tab配置，与Tab.Screen的name对应
  const tabs = [
    { name: "Dashboard", icon: "📊" },
    { name: "Weight Tracking", icon: "⚖️" },
    { name: "Period Tracking", icon: "🩸" },
    { name: "Food Tracking", icon: "🍛" },
  ];

  return (
    <View style={styles.menuContainer}>
      {tabs.map((tab) => {
        const isFocused = state.index === state.routes.findIndex(route => route.name === tab.name);
        return (
          <TouchableOpacity 
            key={tab.name}
            style={[styles.menuItem, isFocused && styles.activeMenuItem]} // 可添加活跃状态样式
            onPress={() => handleOptionPress(tab.name)}
          >
            <Text>{tab.icon}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

方案2：临时快速验证方案 #

在表单提交完成后，手动调用导航方法强制留在当前页面：
首先给WeightInputForm传递navigation props：

// WeightTrackingScreen中修改
<WeightInputForm navigation={navigation}></WeightInputForm>

然后在createWeight函数末尾添加：

async function createWeight() {
  // ... 原有代码
  setIsLoading(false);
  navigation.navigate('Weight Tracking'); // 强制留在当前Tab
}

注意：方案2仅为临时解决，建议优先使用方案1修复自定义tabBar的实现，确保Tab导航状态与UI同步。

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