StackNavigatorの子画面でtabBarを非表示にする方法

Question

StackNavigatorで2つの画面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を表示したくない場合は、あなたがTabNavigator内部の巣画面Bいけない、あなたはTabNavigatorのうち、画面Bを移動するナビゲータ再設計する必要があります。

AppScreen.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; 

index.android.js

import AppScreen from './src/test/AppScreen' 

    export default class myapp extends Component { 
     render() { 
      return (<AppScreen/>); 
     } 
    } 
//the rest code...