React Navigation默认goBack按钮点击崩溃，iOS手势返回正常求助

这个问题我之前处理过，结合你的场景（iOS返回手势正常但点击按钮崩溃），核心原因是返回按钮的navigation对象引用错误，导致调用goBack()时找不到对应的方法。下面是具体的排查和解决方案：

1. 检查是否自定义了返回按钮（最常见原因） #

如果你在Chat组件里自定义了headerLeft返回按钮，一定要注意：navigationOptions是静态属性，这里的this并不指向组件实例，直接用this.props.navigation会拿到undefined或者错误的对象。

错误写法： #

class Chat extends Component {
  static navigationOptions = {
    headerLeft: () => (
      <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
        <Text>返回</Text>
      </TouchableOpacity>
    )
  }
  // ...其他代码
}

正确写法： #

把navigationOptions改成函数形式，接收navigation参数，然后用这个参数调用goBack()：

class Chat extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerLeft: () => (
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>返回</Text>
      </TouchableOpacity>
    )
  })
  // ...其他代码
}

2. 确认Chat组件正确接收navigation props #

如果Chat是函数组件，要确保你已经正确解构了navigation参数：

const Chat = ({ navigation }) => {
  // 组件逻辑
}

如果Chat被嵌套在其他组件（比如自定义的容器组件）里，导致navigation props没传递下来，可以用withNavigation高阶组件包裹它：

import { withNavigation } from 'react-navigation';

class Chat extends Component {
  // ...组件代码
}

// 用withNavigation包裹后，组件会自动获得navigation props
export default withNavigation(Chat);

3. 排查全局导航配置 #

看看你的StackNavigator全局navigationOptions有没有覆盖默认返回按钮的逻辑。比如如果全局配置里错误地自定义了headerLeft，也会导致同样的问题。先暂时注释掉全局的navigationOptions测试：

// 暂时注释，测试默认返回按钮
export const AppNavigator = StackNavigator(
  {
    Conversations: {screen: ConversationsContainer},
    Chat: {screen: Chat}
  },
  // { navigationOptions: { headerTintColor: "#36c3e7" }, }
);

如果默认返回按钮正常，再逐步调整全局配置，确保没有破坏返回按钮的navigation绑定。

额外提示 #

iOS返回手势能正常工作，说明你的导航栈本身是没问题的，问题就出在返回按钮的onPress回调里的navigation引用错误，按照上面的步骤排查应该就能解决啦！

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