隐藏以前的选项卡和标题 react-navigation v3 [英] Hide previous tabs and header react-navigation v3

问题描述

我有一个 createMaterialTopTabNavigator，当我按下以在另一个屏幕上导航时，我想隐藏选项卡和标题但显示当前标题(Pronostics 详细信息").有可能吗?

MontanteTab 的代码:

 import React from 'react';从'react-native'导入{ScrollView，View，FlatList}；从react-native-elements"导入 {ListItem}；从../../data/Constants/Pronostics"导入pronostics；从react-navigation"导入 {createAppContainer, createStackNavigator}；从../../screens/PronosticsDetailsS​​creen"导入 PronosticsDetailsS​​creen；class MontanteTab 扩展了 React.Component {使成为() {返回 (<查看><滚动视图><查看><平面列表数据={pronostics}keyExtractor={(item, index) =>index.toString()}renderItem={({item}) =>(<列表项键={item.id}leftAvatar={{source: {uri: item.image}}}标题={item.competition}副标题={item.equipe_domicile + ' - ' + item.equipe_exterieur}onPress={() =>this.props.navigation.navigate('PronosticsDetails', {name: 'Jnae'})}/>)}/></查看></滚动视图></查看>);}}const MontanteStack = createStackNavigator({蒙太奇:{屏幕:MontanteTab，导航选项:({导航})=>({标题:空，}),},Pronostics详细信息:{屏幕:PronosticsDetailsS​​creen，导航选项:({导航})=>({headerMode: '屏幕',headerTitle: 'Pronostics 详细信息',标题样式:{背景颜色:'#000000'，文本对齐:'居中'，},headerTintColor: '#ffffff',标题标题样式:{颜色:'#c7943e'，文本对齐:'居中'，alignSelf: '居中',justifyContent: '中心',弹性:1，}}),},},{initialRouteName: 'Montante',});导出默认 createAppContainer(MontanteStack);

PronosticsDetailsS​​creen 的代码:

 import React from 'react';进口 {样式表，看法，来自'反应原生';从react-native-elements"导入{Text}；导出默认类 PronosticsDetailsS​​creen 扩展 React.Component {使成为() {返回 (<视图样式={styles.container}><文本>细节</文本></查看>);}}const 样式 = StyleSheet.create({容器: {弹性:1，背景颜色:'#fff'，},内容容器:{填充顶部:30，},图像: {高度:100，宽度:100，}});

我试图将标题设置为null"，但当前标题也被隐藏了..

预先感谢您的帮助

解决方案

如果 API 支持隐藏 createMaterialTopTabNavigator() 的能力，生活就会变得简单！但此选项适用于底部标签，而不是顶部.

经过研究和测试，我认为可以隐藏选项卡和标题.这是玩嵌套导航的问题.(灵感来自:

在屏幕 07 上按后退按钮将返回到屏幕 06.

从'react'导入React；import { StyleSheet, Text, View } from 'react-native';import { createStackNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation';从 './screens/Screen01' 导入 Screen01；从 './screens/Screen02' 导入 Screen02；从 './screens/Screen03' 导入 Screen03；从 './screens/Screen04' 导入 Screen04；从 './screens/Screen05' 导入 Screen05；从 './screens/Screen06' 导入 Screen06；从 './screens/Screen07' 导入 Screen07；const AppStackNavigator = createStackNavigator({家: {屏幕:Screen01},流一:{屏幕:createStackNavigator({第02页:{屏幕:Screen02 },第03页:{屏幕:Screen03 },流程二:{屏幕:createBottomTabNavigator({第04页:{屏幕:Screen04},流程三:{屏幕:createMaterialTopTabNavigator({第05页:{屏幕:Screen05},第06页:{屏幕:Screen06},})}})//结束createBottomTabNavigator，结束flowThree},流程四:createStackNavigator({page07:{屏幕:屏幕07}})//结束流程四},{navigationOptions: {header: null}//在 flowOne 中隐藏标题})},});const AppContainer = createAppContainer(AppStackNavigator);导出默认类 App 扩展 React.Component {使成为() {返回 (<AppContainer/>);}}const 样式 = StyleSheet.create({容器: {弹性:1，背景颜色:'#fff'，alignItems: '中心',justifyContent: '中心',},});

我在这里有 Expo 演示:https://exp.host/@project8888/NavigationDemo

I have a createMaterialTopTabNavigator and when I press to navigate on another screen, I would like hide the tabs and the header but display the current header ("Pronostics détails"). It's possible ?

The code of 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);

The code of PronosticsDetailsScreen :

    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,
    }
});

I tried to set the header to "null" but the current header is also hidden..

Thank you in advance for your help

解决方案

Life would be easy if the API supported the ability to hide createMaterialTopTabNavigator()! But this option exists for bottom tabs, not top.

After doing research and test, I think it is possible to hide the tabs and header. It's a matter of playing with the nested navigation. (Inspired by: https://github.com/react-navigation/react-navigation/issues/1979 and Hide parent's navigation header from the nested navigator)

For example:

Pushing the back button on Screen 07 will go back to Screen 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',
      },
    });

I've got Expo demo here: https://exp.host/@project8888/NavigationDemo

这篇关于隐藏以前的选项卡和标题 react-navigation v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！