反应导航(TabNavigator)不起作用

Question

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

我做过："npm安装--保存反应-导航“在该项目中。我做错什么了？

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

返回MainNavigator，而不是用一个额外的视图包装，我还建议您不要在渲染中反复使用它。您可能甚至不需要这个包装反应组件。

Answer 2

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

您不需要在任何标记中包装您的主路由器组件。

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

Answer 3

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

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

它将解决这个问题。我试过了，成功了。

https://repl.it/L6S8/0