Question

我在StackNavigator中声明了两个屏幕A和B. StackNavigator嵌套在tabNavigator中。两个屏幕都可以看到该栏。我想在屏幕A中显示它。我在屏幕B中将tabBarVisible设置为false但没有效果。

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

import {StackNavigator, TabNavigator} from 'react-navigation'; 



class ScreenA extends Component {
 static navigationOptions = {
    title: 'A'
 }

 render(){
    <Text>ScreenA</Text>
 }
}

class ScreenB extends Component {
 static navigationOptions = {
    title: 'B'
 }

 render(){
    <Text>ScreenB</Text>
 }
}

const HomeScreen = new StackNavigator({
 A : {screen : ScreenA}, 
 B : {Screen : ScreenB}
}); 

const TabBar = new TabNavigator({
 Main : {screen : HomeScreen}
}); 

export default TabBar;

Answer 1

如果您不想看到带有屏幕B的TabBar，则不应将屏幕B嵌套在TabNavigator内，您需要重新设计导航器以将屏幕B移出{{1} }}

AppScreen.js

TabNavigator

index.android.js

import React, {Component} from "react";
import {Button, Text, View} from "react-native";
import {NavigationActions, StackNavigator, TabNavigator} from "react-navigation";

//reference to the root App navigator
let appNavRef;

class ScreenA extends Component {
    static navigationOptions = {
        title: 'A'
    };

    _handlerPress = () => {

        //handle navigation
        const navigateAction = NavigationActions.navigate({
            type: 'Navigation/NAVIGATE',
            routeName: 'bNav',
            params: {},
        });
        appNavRef.dispatch(navigateAction)
    };

    render() {
        return (
            <View>
                <Text>ScreenA</Text>
                <Button title="GoToB" onPress={this._handlerPress}/>
            </View>
        )
    }
}

class ScreenB extends Component {
    static navigationOptions = {
        title: 'B'
    };

    render() {
        return <Text>ScreenB</Text>
    }
}

const HomeScreen = new StackNavigator({
    A: {screen: ScreenA}
    //move screen B outside
});

const TabBar = new TabNavigator({
    Main: {screen: HomeScreen}
});

class TabScreen extends Component {

    //hide the StackNavigator header bar
    static navigationOptions = {
        header: null,
    };

    render() {
        return (
            <TabBar/>
        );
    }
}

const AppNav = new StackNavigator({
    tabNav: {screen: TabScreen},
    bNav: {screen: ScreenB}
});

class App extends Component {

    render() {
        return (
            //get the reference to the root navigator
            <AppNav ref={navigatorRef => {
                appNavRef = navigatorRef
            }}/>
        );
    }

}

export default App;

Answer 2

实际上很容易，只需在navigationOptions中将tabBarVisible设置为false

如何在StackNavigator的子屏幕中隐藏tabBar

2 个答案: