2017-12-22 24 views
0

タブとスタックを使用すると、次のページスタイルにジャンプした後に複数のヘッダーが表示されるため、反応ナビゲーション設定に問題がありますか? このアプリ入り口である:これはDページである反応ナビゲーションより多くのページヘッダー?

C.js

import React, { Component } from 'react'; 
import { List,Button } from 'antd-mobile'; 
import { StackNavigator, TabNavigator } from 'react-navigation'; 

import { 
    Platform, 
    StyleSheet, 
    Text, 
    Image, 
    View 
} from 'react-native'; 

class C extends Component { 
    static navigationOptions = ({ navigation }) => ({ 
     title: 'C页面', 
    }); 
    render() { 
    return (
     <View> 
     <Button>C页面</Button> 
     </View> 
    ); 
    } 
} 

export default C; 

App.js

import React, { Component } from 'react'; 
import { 
    Platform, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import { StackNavigator, TabNavigator } from 'react-navigation'; 
import { Button } from 'antd-mobile'; 
import C from './C'; 
import D from './D'; 

class App extends Component { 

    render() { 
    const { params } = this.props.navigation.state; 
    return (
     <View> 
     <Button onClick={() => this.props.navigation.navigate('cc')}>A页面</Button> 
     </View> 
    ); 
    } 
} 
class B extends React.Component { 
    render() { 
    return (
     <View> 
     <Button onClick={() => this.props.navigation.navigate('dd')}>B页面</Button> 
     </View> 
    ); 
    } 
} 

const tab = TabNavigator({ 
    c: { 
    screen: App, navigationOptions: { 
     tabBarLabel: 'A', 
    } 
    }, 
    d: { 
    screen: B, navigationOptions: { 
     tabBarLabel: 'B' 
    } 
    }, 
}); 
tab.navigationOptions = { 
    title: 'A和B', 
}; 
const SimpleApp = StackNavigator({ 
    Home: { screen: tab }, 
    cc: { screen: C }, 
    dd: {screen: D}, 
}); 

export default SimpleApp; 

これはCページコードでありますコード:

D.js

import React, { Component } from 'react'; 
import { List,Button } from 'antd-mobile'; 
import { StackNavigator, TabNavigator } from 'react-navigation'; 
import E from './E'; 

import { 
    Platform, 
    StyleSheet, 
    Text, 
    Image, 
    View 
} from 'react-native'; 

class D extends Component { 
    static navigationOptions = ({ navigation }) => ({ 
     title: 'D页面', 
    }); 
    render() { 
    return (
     <View> 
     <Button onClick={()=>this.props.navigation.navigate('ee')}>D页面</Button> 
     </View> 
    ); 
    } 
} 
const Simple = StackNavigator({ 
    dd: { screen: D }, 
    ee: { screen: E }, 
    }); 
export default Simple; 

これでEページのコード:

E.js

import React, { Component } from 'react'; 
import { List,Button } from 'antd-mobile'; 
import { StackNavigator, TabNavigator } from 'react-navigation'; 

import { 
    Platform, 
    StyleSheet, 
    Text, 
    Image, 
    View 
} from 'react-native'; 

class E extends Component { 
    static navigationOptions = ({ navigation }) => ({ 
     title: 'E页面', 
    }); 
    render() { 
    return (
     <View> 
     <Button>E页面</Button> 
     </View> 
    ); 
    } 
} 

export default E; 

enter image description here enter image description here TabNavigatorコンテナとmord StackNavigator、なぜ? A-> C-> Dエラー? マイコンフィギュレーションエラーがで発生どこ???

答えて

1

あなたnavigatorsOptionsに追加することができますheaderModeオプション、

トライheaderModeはありません: 'どれも' あなたの子供のナビゲーターに

check doc

関連する問題