React Navigation v2报错：Objects are not valid as a React child 解决记录

我最近在使用React Navigation v2开发React Native应用时碰到一个棘手的问题：当我把导航器包裹在自定义的App组件中时，安卓设备直接抛出了React子元素无效的错误，但iOS端运行完全正常。而如果直接导出导航器组件，两边都能正常工作——但我需要在App组件里传递MobX store，所以必须找到解决办法。

我的App组件代码 #

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import FirstScreen from './firstscreen';
import SecondScreen from './secondscreen';

const AppNavigator = createStackNavigator(
  {
    FirstScreen: { screen: FirstScreen },
    SecondScreen: { screen: SecondScreen },
  },
  {
    initialRouteName: 'FirstScreen',
    headerMode: 'none'
  }
);

export default class App extends Component {
  render() {
    return (
      <AppNavigator />
    )
  }
}

报错信息 #

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

排查与解决过程 #

• 首先对照React Navigation v2的官方文档确认写法，发现代码和文档示例完全一致，排除了写法错误的可能。
• 注意到只有安卓设备报错，iOS正常，这说明问题和平台相关的依赖或环境有关。
• 经过一番排查，最终定位到是es6-symbol这个第三方包导致的冲突。移除这个包后，重新运行项目，安卓端的报错消失，App组件正常渲染导航器，同时也能顺利传递MobX store了。

内容的提问来源于stack exchange，提问作者Marek N.