反应导航（TabNavigator）不起作用

Question

我在使用 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',
  },
});

Answer 1

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

you need not to wrap your main router component in any tag.

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

Answer 2

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

Answer 3

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

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

它将解决这个问题。我试过它有效。

https://repl.it/L6S8/0

反应导航（TabNavigator）不起作用

React Navigation (TabNavigator) doesn't work

react-native

react-navigation