reactjs - React-native Tab 导航器未显示

标签 reactjs react-native react-navigation

我想在我的应用程序中显示一个 TabNavigator。为此我使用 this但现在我不得不重组我的代码,它不再工作了。 这是我的代码:

主类:

import React, {Component} from 'react';
import {View,Text, WebView,StyleSheet} from 'react-native';
import { TabNavigator } from "react-navigation";
const Navigation = TabNavigator({
  Prod: { screen: Prod },
  ContinuousDeployment: { screen: ContinuousDeployment },
});
export default class Mattermost extends Component{
    constructor(props){
        super(props);

        this.state = ({
            MMAUTHTOKEN : null,
            BASICAUTH : null,
        });
    }
    render(){
        if(this.state.MMAUTHTOKEN === undefined || this.state.MMAUTHTOKEN === null){
            return(
                /*Another page , not the tab*/
            );
        }
        else if(this.state.BASICAUTH === undefined || this.state.BASICAUTH === null){
                return(
                    /*Another page , not the tab*/
                );
        }
        else{
            return <View>{Navigation}</View>;
        }
    }

这是我的一个页面的类:

import React,{Component} from 'react';
import {View,Text,StyleSheet} from 'react-native';


export default class Prod extends Component{
    constructor(props){
        super(props);
    }

    static navigationOptions = {
        tabBarLabel: 'Prod',
        tabBarIcon: ({ tintColor }) => (
            <Image source={require('../Images/Icones/jenkins.png')} style={[styles.icon, {tintColor: tintColor}]}/>
        ),
    };

    put(){
    }
    render(){
        return (
            <View>
                <Text>Prod</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
});

它以前工作得很好,但现在它显示白屏,没有选项卡,并且没有任何警告或错误。如果有人能帮助我那就太酷了!提前致谢,亚历克斯

最佳答案

改变这个

return <View>{Navigation}</View>;

return <View><Navigation /></View>;

return <Navigation />;

应该解决这个问题。

关于reactjs - React-native Tab 导航器未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45916055/

相关文章:

react-native - 修复错误 : unable to resolve module './index.android' from ' '

javascript - 为什么我的 React 复选框 onChange 处理程序在渲染时触发,而不是在单击该框时触发?

javascript - 如何使用 IIS 设置 react-router clear URL?

javascript - react native 构建失败

reactjs - navigation.goback() 缺少数据

react-native - 如何在 react 导航 5.x 中创建透明背景?

react-native - 有没有办法获得初始状态?

javascript - 如何使用 Passport.js 将数据从 React 客户端传递到 Oauth2.0 Google 策略流程

node.js - 通过 CIVIC Symfony+Reactjs+NodeJs 登录

react-native - 通过 AccessibilityManager 的字体大小倍增器