React Native跨文件组件使用React Navigation页面跳转的疑问

首先，你需要在index.js中导入两个组件，因为Stack.Screen需要用到它们的引用：

// index.js 顶部添加
import HomeScreen from './home';
import DetailsScreen from './detailsScreen';

然后在home.js中，你需要获取navigation对象来实现跳转，有两种常用方式：

• 通过组件props接收navigation：React Navigation会自动给栈导航中的屏幕组件传入navigation props，直接解构使用即可：

// home.js
import { Button, View } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    <View>
      <Button
        title="打开详情页"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

• 使用useNavigation钩子（仅函数组件）：如果组件没有直接接收props，或者更偏好钩子写法，可以导入useNavigation获取导航对象：

// home.js
import { Button, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();
  return (
    <View>
      <Button
        title="打开详情页"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

另外，home.js和detailsScreen.js中的组件必须导出（示例中用了export default），这样index.js才能正确导入。

这种写法不可行，原因有两点：

1. navigation.navigate('Details')是立即执行的函数调用，会在组件渲染时自动触发跳转，导致进入Home页就直接跳转到Details页，完全不符合交互逻辑。
2. 这个函数的返回值是undefined，在JSX中渲染undefined不会产生任何可视元素，属于无效代码。

正确的做法是把跳转逻辑绑定到用户交互事件中（比如按钮的onPress、触摸事件的onPress等），只有当用户主动触发时才执行跳转，就像问题1示例中的写法那样。

内容的提问来源于stack exchange，提问作者At-U