react-navigation菜单项跳转报错navigation undefined，如何实现正确导航？

当前遇到的跳转报错是两个问题叠加导致的：

• this上下文丢失：代码里的renderNotification如果是独立定义的普通函数，不是类组件的绑定方法，内部的this根本不会指向组件实例，自然访问不到挂载在组件实例上的props，才会触发undefined is not an object的报错。
• 拼写错误：报错信息里提到的_this2.props.naviagtion.navigate，是实际运行的代码里把navigation的字母顺序写反了，正确拼写为navigation，哪怕this指向正确，这个拼写错误也会导致找不到对应的导航方法。

按照类组件的规范调整所有方法的绑定逻辑，确保this可以正确访问到组件props，调整后的核心代码片段如下：

// 确保组件正确继承你定义的Props类型
class NotificationDropdown extends React.Component<NotificationDropdownProps> {
  // 所有需要访问this的方法直接写成箭头函数形式的类属性，自动绑定this到组件实例，不会丢失上下文
  renderNotification = (notification: INotification) => {
    return (
      <MenuOption
        onSelect={() => {
          // 保持原有的系统通知判断逻辑
          if (notification.type === INotificationType.SYSTEM) {
            this.testFunction();
          }
        }}
      >
        {/* 原有的通知视图结构、图标、文本逻辑完全保留即可 */}
        <View style={[styles.notificationContainer]}>
          <View style={styles.iconArea}>
            <View style={[styles.iconCircle]}>
              <Icon
                name={this.getIconType(notification.type)}
                color={this.notificationColor(notification.type)}
                size={26}
              />
            </View>
          </View>
          <View>
            <Text>{notification.text}</Text>
            <Text>
              {this.getDate(new Date(notification.dateCreated))}
            </Text>
          </View>
        </View>
      </MenuOption>
    )
  }

  testFunction = () => {
    // 注意校验navigation的拼写，不要出现字母顺序错误
    this.props.navigation.navigate('NextPage')
  }

  // 原有的getIconType、notificationColor、getDate、keyExtractor等方法，同样写成箭头函数类属性形式，避免this丢失
  getIconType = (type: INotificationType) => { /* 原有逻辑 */ }
  notificationColor = (type: INotificationType) => { /* 原有逻辑 */ }
  getDate = (date: Date) => { /* 原有逻辑 */ }
  keyExtractor = (item: INotification) => item.id.toString()

  render() {
    return (
      <View>
        <Text>Notifications</Text>
        {this.props.notifications.length > 0 ? (
          <FlatList
            contentContainerStyle={{ borderRadius: 10 }}
            data={this.props.notifications.slice(0, 5)}
            renderItem={({ item }) => this.renderNotification(item)}
            keyExtractor={this.keyExtractor}
          />
        ) : (
          <Text>No Notifications!</Text>
        )}
      </View>
    )
  }
}

• 不要在类组件外部定义独立的普通函数function renderNotification()，这类脱离组件作用域的函数没有绑定组件实例的能力，永远拿不到组件的props和导航对象。
• 如果你的组件是嵌在多层自定义业务组件中，没有被导航容器直接包裹，需要确认navigation对象是否沿着props逐层透传，没有透传链路的情况下需要手动从上层拿到navigation对象再传给当前组件，不要依赖React Navigation自动注入的props。
• 跳转前确认目标路由名称NextPage已经在导航栈中完成注册，否则即使导航调用正常，也会出现跳转失败的问题。

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