TabNavigator无法加载？

Question

我已经创建了一个新的项目，使用世博会XDE，并试图学习React-Navigation。我对App.js作了如下修改

import React from 'react';
import { StyleSheet, 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: 'grey',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

如果我错了，MainNavigator组件应该引用const MainNavigator并呈现2个选项卡，但是没有任何选项卡被加载到模拟器中。我能知道哪一部分出了问题吗？

Answer 1

两件事..。

作为一个TabNavigation的子代，这个view...which似乎不太好，因为它应该在屏幕中处理这个问题。删除父<View>修复了这个问题。处理屏幕内视图的样式设计。

我还建议不要在render方法中定义MainNavigator变量。虽然它没有破坏应用程序，但这不是最佳实践，当应用程序变得更大时，它可能会产生一些无法预料的后果。

最终代码：

import React from 'react';
// import { StyleSheet, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import AuthScreen from './screens/AuthScreen';
import WelcomeScreen from './screens/WelcomeScreen';

const MainNavigator = TabNavigator({
  welcome: { screen: WelcomeScreen },
  auth: { screen: AuthScreen }
});

export default class App extends React.Component {
  render() {
    return (
      <MainNavigator />
    );
  }
}