反应导航（TabNavigator）不起作用

问题描述：

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

我这样做：“故宫安装--save反应导航”在该项目中。我做错了什么？

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', 
    }, 
});

尝试只返回MainNavigator而不是用额外视图进行包装。 –

谢谢@EdgarAroutiounian，它现在正常运作！你可以写一个答案，所以我可以在Stackoverflow中接受它。 –

答

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

答

你做的唯一的错误是你一个包裹里面查看你MainNaviagtor，所以删除在主导航顶部的wrappper。

你不需要包装你的主路由器组件在任何标记。

你不需要在naviagators周围看到一个包装。我希望这可以解决您的问题，如果不让我知道:)

答

你的代码是好的，你可以用主导航到一个容器视图。为了您将来可以在容器视图中添加更多组件，实际问题与容器样式有关。通过删除alignItems和JustifyContent属性来更改样式，如下所示：

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

它会解决此问题。我为我尝试了它的工作原理。

https://repl.it/L6S8/0

反应导航（TabNavigator）不起作用

相关推荐