Question

我有一个问题，当我在＆＃39; react-navigation＆＃39;上使用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',
  },
});

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

1 个答案: