Expo中React Native运行报错'找不到navigation变量'导致导航失效求助

数据老陈

2026-11-3

排查方向与解决步骤

这个报错和你之前尝试移除this.props引用的操作没有关联，根因无外乎两类：一是navigation变量的作用域根本不对，二是导航容器没把navigation prop注入到Rooms组件里，按以下顺序排查就能定位：

第一先查调试时有没有改出裸写的navigation变量
你贴的代码里openMessages方法的写法是对的：
```
openMessages(room) {
  this.props.navigation.navigate('Messages', {roomKey: room.key, roomName: room.name});
}
```
要是你之前为了调试方便，把这段里的this.props.navigation直接改成了光秃秃的navigation，那类组件的作用域里压根没有这个独立变量，运行时百分百抛can't find variable navigation的错。
第二查导航栈的注册是不是没做对
从你代码里写的static navigationOptions能看出来，你用的是React Navigation 4.x的旧版API，要拿到navigation prop必须满足两个条件：
1. 得用createStackNavigator把Rooms、Messages两个页面都注册成栈路由的对应页面，结构大概长这样：
```
// 导航注册逻辑示例
import { createStackNavigator } from 'react-navigation-stack';
import Rooms from './Rooms';
import Messages from './Messages';

const RootStack = createStackNavigator({
  Rooms: { screen: Rooms },
  Messages: { screen: Messages }
});
```
2. 注册完的导航栈必须用createAppContainer包一层，当整个App的根组件渲染。要是你图省事直接把Rooms组件扔在App.js当根组件渲染，根本没套导航容器，那Rooms的this.props上根本就没有navigation这个属性，点按钮调用的时候肯定报错。
最后查this绑定是不是丢了
你现在代码里所有按钮的onPress回调都是用箭头函数写的，this绑定是没问题的。要是你之前调试的时候，把renderRow里的回调改成没绑定的普通函数，类组件的this指向就会乱，读this.props.navigation的时候拿到的就是undefined，也会出同类的错。