Question

我正在尝试使用react-navigation（TabNavigator）显示标签菜单但是我得到以下红色屏幕错误或者如果我更改了键的名称，我得到一个空白屏幕。

我正在使用：

react-native: 0.51.0
npm: 4.6.1

这是我的router.js文件：

＆＃13;

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} />
            }
        }
    }
});

＆＃13;

这是我的BookList.js文件：

＆＃13;

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;

＆＃13;

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} />
            }
        }
});

选项卡导航器 - 错误：无效键＆＃39; tabBar＆＃39;在导航选项

1 个答案: