Tab Navigator - Error: Invalid Key 'tabBar' defined in navigation options

Question

我正在尝试使用 react-navigation (TabNavigator) 来显示选项卡菜单，但我得到以下红屏错误，或者如果我更改按键的名称，我得到一个空白屏幕。

我正在使用：

react-native: 0.51.0
npm: 4.6.1

这是我的 router.js 文件：

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: {
            tabBar: {
            label: "Books",
            icon: ({ tintColor }) =>
                <Icon name="list" size={35} color={tintColor} />
            }
        }
    }
});

这是我的 BookList.js 文件：

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView
} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { users } from '../config/data';

import '../config/ReactotronConfig';
import Reactotron from "reactotron-react-native";

class BooksList extends Component {
  onLearnMore = user => {
    this.props.navigation.navigate("Details", { ...user });
  };

  render() {
    return (
      <ScrollView>
        <List>
          {users.map(user => (
            <ListItem
              key={user.login.username}
              roundAvatar
              avatar={{ uri: user.picture.thumbnail }}
              title={`${user.name.first.toUpperCase()} ${user.name.last.toUpperCase()}`}
              subtitle={user.email}
              onPress={() => this.onLearnMore(user)}
            />
          ))}
        </List>
      </ScrollView>
    );
  }
}

export default BooksList;

Answer 1

试试这个。

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: "Books",
            tabBarIcon: ({ tintColor }) =>
                <Icon name="list" size={35} color={tintColor} />
            }
        }
});