React Native切换路由后组件不渲染问题求助

你的栈导航点击按钮后页面不切换，核心问题是Home组件未获取到navigation对象，导致navigation.navigate('About')无法执行（虽然控制台未抛出明显异常，但实际navigation变量未定义）。

方法一：直接通过组件参数接收navigation #

修改Home组件，在函数参数中解构出navigation：

export function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Welcome!</Text>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to About"
          onPress={() => {
            navigation.navigate('About')
          }}
        />
      </View>
    </View>
  );
}

方法二：使用useNavigation钩子 #

如果组件层级较深，或者不想通过参数传递，可以使用React Navigation提供的useNavigation钩子：

import { useNavigation } from '@react-navigation/native';

export function Home() {
  const navigation = useNavigation();
  return (
    <View style={styles.container}>
      <Text>Welcome!</Text>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to About"
          onPress={() => {
            navigation.navigate('About')
          }}
        />
      </View>
    </View>
  );
}

修改完成后，点击"Go to About"按钮就能正常跳转到About页面了。

内容的提问来源于stack exchange，提问作者Node.JS