React本机导航TabNavigator

Question

我刚开始学习ReactiveNative，并遵循了一堆实现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。