React-native navigation TabNavigator

Question

我刚刚开始学习 React Native ，并且正在跟随一堆指南来实现TabNavigator。但是，它在Android模拟器中没有显示任何内容。我正在开发Windows环境。

文件结构如下所示：

app/
-components/
-config/
--router.js
-Screens/
--Inbox/
---Inbox.js
--Account/
---Account.js
-Overview.js

我试图将所有导航逻辑放在router.js文件中。代码如下所示：

import React, {Component} from 'react';
import {TabNavigator, TabBarBottom} from 'react-navigation';
import {Icon} from 'react-native-elements';

import Login from '../Login/Login';
import Account from '../Screens/Account/Account';
import Inbox from '../Screens/Inbox/Inbox';

export const Tabs = TabNavigator({
    Account: {
        screen: Account,
        navigationOptions: {
            title: 'Account',
        },
    },
    Inbox: {
        screen: Inbox,
        navigationOptions: {
            title: 'Inbox',
        },
    },
},

{
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
});

Account.js和Inbox.js都有一些简单的代码来呈现文本：

import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';



export default class Account extends Component{
    render() {
        return (
          <View>
            <Text>
                This is Account Page.
            </Text>
          </View>
        );

    }
}

和index.android.js包含：

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

import Login from './app/component/Login/Login';
import Overview from './app/component/Overview';

export default class MyApp extends Component {
  render() {
    return (
      <View>
        <Overview />
      </View>
    );
  }
}

AppRegistry.registerComponent('staging', () => MyApp);

和Overview.js：

import React, { Component } from 'react';
import {View, Container, Header, Content, Footer, FooterTab, Button, Text, Icon, Fab,} from 'native-base';
import {StyleSheet} from 'react-native';

import {Tabs} from './config/router';
import Login from './Login/Login';

class Overview extends Component{
    render(){
        return <Tabs />
    }
}

export default Overview;

Android模拟器绝对没有显示任何内容。并且没有构建错误。我究竟做错了什么？

Answer 1

问题似乎是您注册的应用程序的名称与根文件夹不匹配。所以，如果您的根文件夹是/ app，那么您应该在index.android.js中使用该名称 - AppRegistry调用（在屏幕底部），如下所示：

AppRegistry.registerComponent('app', () => MyApp);

不确定为什么你的目前正在“暂存”，但这应该可以解决你的问题。

Answer 2

由于您没有export default YourClassName，因此必须使用{ }

导入它

import { Account } from '../Screens/Account/Account';
import { Inbox } from '../Screens/Inbox/Inbox';

您可以阅读this answer了解详情。