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

Question

当我在“react-navigation”上使用 TabNavigator 时，我遇到了问题。问题是我的屏幕显示空白视图。

这是我的代码：

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 喜欢 WelcomeScreen.js

希望你能帮帮我，谢谢

Answer 1

因为您在 App.js 上的样式。删除alignItems: "center"

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