Question

我在使用TabNavigator时遇到React Navigation问题，而不是看到第一个屏幕（WelcomeScreen）并在屏幕底部看到标签导航器，只有一个空屏幕。

我已经完成了：＆＃34; npm install --save react-navigation＆＃34;在那个项目中。我做错了什么？

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

Answer 1

返回MainNavigator而不是用额外的视图包装，我也建议不要在渲染中反复进行。您可能甚至不需要这个包装React组件。

Answer 2

您唯一的错误是将MainNaviagtor包裹在视图中，因此请移除主导航器顶部的包装器。

您无需将主路由器组件包装在任何标签中。

您不需要围绕导航员的包装来查看。我希望这能解决你的问题，如果不让我知道：）

Answer 3

您的代码很好，您可以将主导航器包装到容器视图中。因此，您将来可以在容器视图中添加更多组件，实际问题在于容器样式。通过删除alignItems和JustifyContent属性

来更改下面的样式

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

它将解决此问题。我试着帮我工作。

https://repl.it/L6S8/0

React Navigation（TabNavigator）不起作用

3 个答案: