Question

我使用Expo 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

2件事......

TabNavigation似乎不能很好地成为一个观点的孩子...这是有道理的，因为它应该在屏幕内处理它。删除父<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 />
    );
  }
}

TabNavigator无法加载？

1 个答案: