React Native Navigation问题：交换重命名文件后导航异常

在React Native开发中，我将Register4和Register5两个文件重命名以交换功能——原本Register4应为密码表单，Register5应为手机号表单。但操作后React Navigation未识别到变更，仍按旧逻辑渲染：Register4显示为手机号表单，新的Register4内容未生效。

App.js 导航栈代码 #

const OutsideLayout = () => {
  return(
    <InsideStack.Navigator>
        <InsideStack.Screen name="Login" component={Login}/>
        <InsideStack.Screen name="Register" component={Register}/>
        <InsideStack.Screen name="Register2" component={Register2}/>
        <InsideStack.Screen name="Register3" component={Register3}/>
        <InsideStack.Screen name="Register4" component={Register4}/>
        <InsideStack.Screen name="Register5" component={Register5}/>
        <InsideStack.Screen name="Register6" component={Register6}/>
    </InsideStack.Navigator>
  )
}

export default function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(FIREBASE_AUTH, (user) => {
      console.log('user', user);
      setUser(user);
    })
  }, [])

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        {user ? (
          <Stack.Screen name='Inside' component={InsideLayout} options={{headerShown:false}}/>
        ) : (
          <Stack.Screen name='Outside' component={OutsideLayout} options={{headerShown:false}}/>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Register4 代码（当前应为密码表单） #

const Register4 = ({navigation, route}) => {
  const[password, setPassword] = useState("");

  return(
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
    >
      <View style={styles.inputContainer}>
        <Text> Password</Text>
        <TextInput
          style={styles.input}
          placeholder="password"
          onChangeText={setPassword}
        />
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity
          onPress={navigation.navigate("Register5", {
            firstName: route.firstName,
            lastName: route.lastName, 
            DateOfBirth: route.DateOfBirth, 
            Username: route.Username,
            Password: password
          })}
          style={[styles.button, styles.buttonOutline]}
        >
          <Text style={styles.buttonOutlineText}>Next</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputContainer: {
    width: '80%'
  },
  input: {
    backgroundColor: 'white',
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 10,
    marginTop: 5,
  },
  buttonContainer: {
    width: '60%',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 40,
  },
  button: {
    backgroundColor: '#0782F9',
    width: '100%',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  buttonOutline: {
    backgroundColor: 'white',
    marginTop: 5,
    borderColor: '#0782F9',
    borderWidth: 2,
  },
  buttonText: {
    color: 'white',
    fontWeight: '700',
    fontSize: 16,
  },
  buttonOutlineText: {
    color: '#0782F9',
    fontWeight: '700',
    fontSize: 16,
  },
});

export default Register4;

Register5 代码（当前应为手机号表单） #

const Register5 = ({navigation, route}) => {
  const phoneInput = useRef(null);
  const phonenumber = useRef(null);
  const [fphonenumber, setFphonenumber] = useState('');
  const setValid = useRef(null);

  const recaptchaVerifier = useRef(null);
  const [verificationId,setVerificationID] = useState('');
  const [code,setCode] = useState('');

  const sendVerification = () => {
    const phoneProvider = new PhoneAuthProvider(FIREBASE_AUTH);
    phoneProvider
      .verifyPhoneNumber(fphonenumber, recaptchaVerifier.current)
      .then((vid) => {
        setVerificationID(vid);
        setFphonenumber("");
      })
      .catch((error) => {
        alert(error.message);
      });
  }

  const confirmCodeAndUpdateUser = async (verification, authcode) => {
    const credential = PhoneAuthProvider.credential(verification, authcode);
    const {user} = await signInWithCredential(FIREBASE_AUTH, credential)
      .then(() => {
        setCode("");
        var user = FIREBASE_AUTH.currentUser

        updateProfile(user, {
          displayName: route.firstName + " " + route.lastName
        })
      }).then(() => {
        var user = FIREBASE_AUTH.currentUser

        updatePassword(user, route.Password).then(() => {}).catch((error) => {
          console.log(error)
        })

        var database_ref = Database.ref();
        var user_data = {
          full_name: user.displayName,
          date_Of_Birth: route.DateOfBirth,
          username: route.Username,
        }
        database_ref.child('users/' + user.uid).set(user_data);
      })
      .catch((error) => {
        alert(error.message);
      });
  }

  return(
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
    >
      <FirebaseRecaptchaVerifierModal 
        ref={recaptchaVerifier}
        firebaseConfig={firebaseConfig}
        attemptInvisibleVerification={true}
      />

      {!verificationId && (
        <>
          <View style={styles.inputContainer}>
            <Text> Phone Number</Text>
            <PhoneInput
              autoFocus={true}
              ref={phoneInput}
              style={styles.input}
              defaultCode="US"
              placeholder="999-999-9999"
              autoFormat={false}
              onChangeText={(number) => {
                phonenumber.current = number;
              }}
              onChangeFormattedText={(number) => {
                setFphonenumber(number);
              }} />
          </View>
          <View style={styles.buttonContainer}>
            <TouchableOpacity
              disabled={!phonenumber?.current}
              onPress={() => {
                console.log(phonenumber.current);
                console.log(route.password)

                setValid.current = phoneInput.current?.isValidNumber(phonenumber.current);

                if (setValid.current != true) {
                  alert("Phone Number is invalid. Please try a different number.");
                } else {
                  sendVerification();
                }
              }}
              style={[styles.button, styles.buttonOutline]}
            >
              <Text style={styles.buttonOutlineText}>Send Verification Code</Text>
            </TouchableOpacity>
          </View>
        </>
      )}
      
      {verificationId && (
        <View style={styles.buttonContainer}>
          <TextInput
            style={styles.input}
            placeholder="0000000"
            keyboardType='number-pad'
            onChangeText={(text) => {
              setCode(text);
            }}
          />
          <TouchableOpacity
            onPress={() => {
              console.log(code);
              confirmCodeAndUpdateUser(verificationId, code)
            }}
            style={[styles.button, styles.buttonOutline]}
          >
            <Text style={styles.buttonOutlineText}>Confirm Verification Code</Text>
          </TouchableOpacity>
        </View>
      )}
    </KeyboardAvoidingView>
  );
};

// 注：原代码中缺少styles定义，需确保已补充
export default Register5;

1. 清除Metro缓存 #

执行以下命令重启Metro服务器，强制清除缓存：

npx react-native start --reset-cache

之后重新运行项目（npx react-native run-android/npx react-native run-ios）。

2. 检查导入路径 #

确认App.js中Register4和Register5的导入语句完全匹配重命名后的文件名及路径，比如：

import Register4 from './screens/Register4'; // 确保路径和文件名正确
import Register5 from './screens/Register5';

3. 清理平台缓存 #

• iOS：删除项目根目录下的ios/build文件夹，然后执行cd ios && pod install && cd ..，再重启项目。
• Android：删除android/build和android/app/build文件夹，执行./gradlew clean（Mac/Linux）或gradlew clean（Windows），再重启项目。

4. 确认导航逻辑一致性 #

检查跳转代码中的目标页面名称是否符合新的功能逻辑，比如Register4的跳转是否正确指向Register5（当前手机号表单页面），确保没有遗留旧的跳转逻辑。

内容的提问来源于stack exchange，提问作者Small Rad Comp.