React Native Navigation：点击Alert确定按钮后无法跳转页面的问题

你的核心问题是独立的Register函数无法访问navigation对象——它不在RegisterScreen组件的作用域内，也没正确接收传递的navigation参数。下面是两种简单有效的修复方案：

方案一：把注册逻辑移到组件内部 #

直接将注册处理函数放在RegisterScreen组件里，这样就能直接使用组件接收的navigation参数：

function RegisterScreen({ navigation }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // 注册逻辑放在组件内部，直接访问navigation
  const handleRegister = () => {
    Alert.alert(
      "All Done!",
      "You have successfully registered.",
      [{ text: "OK", onPress: () => navigation.navigate('Home') }]
    );
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Registration</Text>
      <TextInput 
        style={styles.input} 
        placeholder="Username"
        onChangeText={(text) => setUsername(text)}
      />
      <TextInput 
        style={styles.input} 
        placeholder="Password"
        onChangeText={(text) => setPassword(text)}
      />
      <Button
        title="Register"
        onPress={handleRegister}
      />
    </View>
  );
}

方案二：给独立的Register函数传递navigation参数 #

如果想保留独立的Register函数，调用时必须把navigation作为参数传入：

function RegisterScreen({ navigation }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      {/* 其他代码不变 */}
      <Button
        title="Register"
        onPress={() => Register(username, password, navigation)} // 传入navigation
      />
    </View>
  );
}

// 函数接收navigation参数
function Register(username, password, navigation){
  Alert.alert(
    "All Done!",
    "You have successfully registered.",
    [{ text: "OK", onPress: () => navigation.navigate('Home') }]
  );
}

为什么之前的尝试可能失败？ #

• 用useNavigation()报错：useNavigation是React钩子，只能在函数组件的顶层调用，不能在普通函数（比如你的独立Register函数）里使用。
• 移到组件内没生效：大概率是你没调整函数调用方式，或者定义函数时没正确访问组件内的navigation。
• NavigationRef没成功：可能是你没正确初始化和关联导航容器的ref，对于当前场景，上面两种方案更直接简单。

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