React Native 0.52中navigate语句触发崩溃：TypeError问题求助

我在RN 0.5X版本开发时也碰到过一模一样的红屏错误，这个问题本质是你的组件没正确获取到导航所需的props，下面是几个最常见的排查和解决办法：

1. 确认组件是导航器的"屏幕"组件 #

只有被直接注册到导航器（比如StackNavigator）中的组件，才会自动接收navigation props。举个正确的配置例子：

// 导航器配置文件
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const AppNavigator = StackNavigator({
  Home: { screen: HomeScreen }, // HomeScreen会自动拿到navigation props
  Details: { screen: DetailsScreen },
});

export default AppNavigator;

如果你的组件是HomeScreen内部的子组件（比如自定义按钮、弹窗），它不会自动继承navigation，需要手动从父组件传递：

// 在HomeScreen中传递navigation给子组件
<CustomActionButton navigation={this.props.navigation} />

2. 使用withNavigation高阶组件注入props #

如果你的组件不是直接的屏幕组件，又不想手动传递props，可以用react-navigation提供的withNavigation高阶组件来自动注入navigation。在RN 0.52对应的1.x版本中，用法如下：

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class CustomButton extends React.Component {
  handleNavigate = () => {
    // 现在this.props.navigation可以正常调用了
    this.props.navigation.navigate('Details');
  };

  render() {
    return <Button onPress={this.handleNavigate} title="跳转到详情页" />;
  }
}

// 用高阶组件包裹后导出
export default withNavigation(CustomButton);

3. 检查根组件的层级结构 #

确保你的App根组件渲染的是导航器，而不是直接渲染目标组件。比如你的App.js应该是这样：

import React from 'react';
import AppNavigator from './navigation/AppNavigator';

export default class App extends React.Component {
  render() {
    return <AppNavigator />; // 根组件渲染导航器，而非单个屏幕组件
  }
}

如果直接渲染HomeScreen而不是导航器，那HomeScreen自然拿不到navigation props。

4. 确认依赖版本兼容性 #

RN 0.52对应的react-navigation版本应该是1.x.x系列，不要使用2.x及以上版本，否则会出现兼容性问题。你可以查看package.json中的依赖：

"dependencies": {
  "react-navigation": "^1.5.11",
  // 其他依赖...
}

如果版本不对，重新安装适配版本：

npm install react-navigation@1.5.11 --save

先从这几个方向排查，基本就能解决这个红屏问题了。

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