使用react-navigation TabNavigator报错：无效键'tabBar'，改键后页面空白

问题原因 #

你遇到的「Invalid Key 'tabBar' defined in navigation options」错误，核心原因是你使用的react-navigation版本（对应RN0.51的是1.x系列）不支持把tabBar相关配置嵌套在tabBar对象里，必须直接使用tabBarLabel、tabBarIcon这类顶级的navigationOptions属性。而修改键名后出现空白，大概率是配置不完整导致标签栏或页面组件没有正确渲染。

修复步骤与代码示例 #

1. 修正router.js的TabNavigator配置

把原来嵌套在tabBar里的配置拆成单独属性，同时补充基础的TabNavigator全局配置，避免空白问题：

import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from "react-native-elements";
import BooksList from '../screens/BooksList';
import FilmsList from '../screens/FilmsList';

export const Tabs = TabNavigator(
  {
    BooksList: {
      screen: BooksList,
      navigationOptions: {
        // 直接使用tabBarLabel，不再嵌套在tabBar对象中
        tabBarLabel: "Books",
        // 直接使用tabBarIcon，参数写法保持不变
        tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />
      }
    },
    // 如果需要FilmsList标签，同样按这个格式配置
    FilmsList: {
      screen: FilmsList,
      navigationOptions: {
        tabBarLabel: "Films",
        tabBarIcon: ({ tintColor }) => <Icon name="movie" size={35} color={tintColor} />
      }
    }
  },
  // 添加全局配置，确保标签栏正常显示
  {
    tabBarPosition: 'bottom', // 标签栏固定在底部
    animationEnabled: true, // 切换标签时启用过渡动画
    swipeEnabled: true, // 支持左右滑动切换标签
    tabBarOptions: {
      activeTintColor: '#e91e63', // 激活状态的文字/图标颜色
      inactiveTintColor: '#888' // 未激活状态的颜色
    }
  }
);

2. 确保根组件正确渲染Tabs

在你的根组件（比如App.js）中，要正确导入并渲染Tabs组件：

import React, { Component } from 'react';
import { Tabs } from './router'; // 根据你的router.js实际路径调整

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

额外注意事项 #

• 确认你安装的react-navigation版本是和RN0.51兼容的1.x系列（比如react-navigation@1.5.11），如果版本过高（2.x+）会出现兼容性问题，可通过命令安装指定版本：npm install react-navigation@1.5.11 --save
• 检查react-native-elements的版本是否适配当前RN版本，避免组件渲染异常

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