在react-native中使用react-navigation时的空白视图

Question

I have a problem, when i use TabNavigator on 'react-navigation'. The problem is my screen show the blank view.

this is my code:

App.js

      import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { TabNavigator } 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',
    },
  });

WelcomeScreen.js

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

  class WelcomeScreen extends React.Component {
    render() {
      return (
        <View>
          <Text>WelcomeScreen</Text>
          <Text>WelcomeScreen</Text>
          <Text>WelcomeScreen</Text>
          <Text>WelcomeScreen</Text>
          <Text>WelcomeScreen</Text>
          <Text>WelcomeScreen</Text>
        </View>
      );
    }
  }

  export default WelcomeScreen;

AuthScreen.js Like WelcomeScreen.js

I hope you can help me,thanks

Answer 1

Because your styles on App.js. Remove alignItems: "center"

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