隱藏先前的標簽和標題react-navigation v3

Question

我有一個createMaterialTopTabNavigator，當我按導航到另一個屏幕時，我想隱藏選項卡和標題，但顯示當前標題（“ Pronosticsdétails”）。 這是可能的 ？

MontanteTab的代碼：

    import React from 'react';
import {ScrollView, View, FlatList} from 'react-native';
import {ListItem} from "react-native-elements";
import pronostics from "../../data/Constants/Pronostics";
import {createAppContainer, createStackNavigator} from "react-navigation";
import PronosticsDetailsScreen from "../../screens/PronosticsDetailsScreen";

class MontanteTab extends React.Component {
    render() {
        return (
            <View>
                <ScrollView>
                    <View>
                        <FlatList
                            data={pronostics}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={({item}) => (
                                <ListItem
                                    key={item.id}
                                    leftAvatar={{source: {uri: item.image}}}
                                    title={item.competition}
                                    subtitle={item.equipe_domicile + ' - ' + item.equipe_exterieur}
                                    onPress={() => this.props.navigation.navigate('PronosticsDetails', {name: 'Jnae'})}
                                />
                            )}
                        />
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const MontanteStack = createStackNavigator(
    {
        Montante: {
            screen: MontanteTab,
            navigationOptions: ({navigation}) => ({
                header: null,
            }),
        },
        PronosticsDetails: {
            screen: PronosticsDetailsScreen,
            navigationOptions: ({navigation}) => ({
                headerMode: 'screen',
                headerTitle: 'Pronostics détails',
                headerStyle: {
                    backgroundColor: '#000000',
                    textAlign: 'center',
                },
                headerTintColor: '#ffffff',
                headerTitleStyle: {
                    color: '#c7943e',
                    textAlign: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flex: 1,
                }
            }),
        },
    },
    {
        initialRouteName: 'Montante',
    }
);

export default createAppContainer(MontanteStack);

PronosticsDetailsS​​creen的代碼：

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

export default class PronosticsDetailsScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Détails</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    contentContainer: {
        paddingTop: 30,
    },
    image: {
        height: 100,
        width: 100,
    }
});

我試圖將標題設置為“ null”，但當前標題也被隱藏。

預先感謝您的幫助

Answer 1

如果API支持隱藏createMaterialTopTabNavigator（）的功能，生活將會很輕松！ 但是此選項存在於底部選項卡，而不是頂部選項卡。

經過研究和測試后，我認為可以隱藏選項卡和標題。 這是玩嵌套導航的問題。 （靈感來自： https : //github.com/react-navigation/react-navigation/issues/1979和從嵌套導航器隱藏父級的導航頭 ）

例如：

在屏幕07上按返回按鈕將返回屏幕06。

 import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createStackNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation'; import Screen01 from './screens/Screen01'; import Screen02 from './screens/Screen02'; import Screen03 from './screens/Screen03'; import Screen04 from './screens/Screen04'; import Screen05 from './screens/Screen05'; import Screen06 from './screens/Screen06'; import Screen07 from './screens/Screen07'; const AppStackNavigator = createStackNavigator({ home: { screen: Screen01 }, flowOne: { screen: createStackNavigator({ page02: { screen: Screen02 }, page03: { screen: Screen03 }, flowTwo: { screen: createBottomTabNavigator({ page04: { screen: Screen04 }, flowThree: { screen: createMaterialTopTabNavigator({ page05: { screen: Screen05 }, page06: { screen: Screen06 }, }) } }) // end createBottomTabNavigator, end flowThree }, flowFour: createStackNavigator({ page07: {screen: Screen07} } ) // end flowFour }, { navigationOptions: {header: null} // hides header in flowOne }) }, }); const AppContainer = createAppContainer(AppStackNavigator); export default class App extends React.Component { render() { return ( <AppContainer /> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); 

我在這里有世博會演示： https ： //exp.host/@project8888/NavigationDemo