反应导航（TabNavigator）不起作用答案

【问题标题】：React Navigation (TabNavigator) doesn't work反应导航（TabNavigator）不起作用
【发布时间】：2017-09-24 05:02:05
【问题描述】：

我在使用React Navigation 时遇到了TabNavigator 的问题，而不是看到第一个屏幕 (WelcomeScreen) 并在屏幕底部看到选项卡导航器，只有一个空屏幕。

我已经在那个项目中完成了：“npm install --save react-navigation”。我做错了什么？

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';

import AuthScreen from './screens/AuthScreen';
import WelcomeScreen from './screens/WelcomeScreen';


export default class App extends React.Component {
  render() {
    const MainNavigator = TabNavigator({
        welcome: { screen: WelcomeScreen },
        auth: { screen: AuthScreen}
    });


    return (
      <View style={styles.container}>

          <MainNavigator/>
      </View>
    );
  }
}

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

【问题讨论】：

尝试只返回 MainNavigator 而不是用额外的视图包装。
谢谢@EdgarAroutiounian，它现在可以工作了！你可以写一个答案，这样我就可以在 Stackoverflow 中接受它。

标签： react-native react-navigation

【解决方案1】：

返回 MainNavigator 而不是用额外的视图包装，我也建议不需要在渲染中一遍又一遍地制作它。你可能甚至不需要这个包装 React 组件。

【讨论】：

【解决方案2】：

您所做的唯一错误是将 MainNaviagtor 包装在视图中，因此请移除主导航器顶部的包装器。

您无需将主路由器组件包装在任何标签中。

您不需要围绕导航器进行包装即可查看。我希望这能解决你的问题，如果不让我知道:)

【讨论】：

【解决方案3】：

您的代码很好，您可以将主导航器包装到容器视图中。因此，您将来可以在容器视图中添加更多组件，实际问题在于容器样式。通过删除 alignItems 和 JustifyContent 属性更改如下样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
})

它将解决此问题。我试过了，效果很好。

https://repl.it/L6S8/0

【讨论】：