需要指定screen react native tabnavigator答案

【问题标题】：Need to specify screen react native tabnavigator需要指定screen react native tabnavigator
【发布时间】：2017-11-14 02:01:48
【问题描述】：

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

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'
  },
});

【问题讨论】：

标签： javascript android react-native react-navigation

【解决方案1】：

在

之前定义App和Comments组件

const MyApp = TabNavigator(...)

希望这会有所帮助。

【讨论】：

我确实在这里定义了它们： const MyApp = TabNavigator({ Feed: { screen: App, }, CommentScreen: { screen: Comments, }, }, { tabBarPosition: 'top', animationEnabled: true , tabBarOptions: { activeTintColor: '#fe8200', }, });
如果这没有通知您。对不起。我不知道 Stack Overflow 是如何通知人们的。
是的，您做到了，但展示位置错误。将 App 和 Comments 定义移到它们的用途之前，例如 ... class App extends React.Component { ... } class Comments extends React.Component { ... } const MyApp = TabNavigator(...); ...