javascript - 需要指定屏幕 react native tabnavigator

Question

问题 我使用 React Native 制作了一个非常基本的应用程序，现在我想要有多个选项卡。当我尝试添加提要和评论选项卡时，收到一条错误消息:

Uncaught Error: Route 'Feed' should declare a screen.
For example:

import MyScreen from './MyScreen'
...
Feed: {
Screen: MyScreen,
}

我不知道为什么会收到此错误，因为我调用的第一个类是“应用程序”屏幕，这就是我对屏幕的命名。我希望得到一些帮助来修复此选项卡错误。谢谢!

代码

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
import { TabNavigator } from 'react-navigation';

const firebaseConfig = {
  apiKey: "API-key",
  authDomain: "candidtwo.firebaseapp.com",
  databaseURL: "https://candidtwo.firebaseio.com",
  storageBucket: "candidtwo.appspot.com",
};

const MyApp = TabNavigator({
  Feed: {
    screen: App,
  },
  CommentScreen: {
    screen: Comments,
  },
}, {
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#fe8200',
  },
});


const firebaseApp = firebase.initializeApp(firebaseConfig);

var fontLoaded = false;
var ref = firebase.database().ref('posts');
var brightColor = ['#ffffff'];
var darkColor = ['#D3D3D3'];
var animalNames = ['WittyRhino','FriendlyRhino'];
var newPostRef = ref.push();

var postWidth = 360;

class App extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
  };
//App Code
}

class Comments extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Notifications',
  };
render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('App')}
        title="Go to notifications"
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 8,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
  button: {
    flex: 1,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
});

Answer 1

先定义应用和评论组件

const MyApp = TabNavigator(...)

希望这会有所帮助。