隐藏以前的选项卡和标题 react-navigation v3

IT技术 javascript android ios reactjs react-native
2021-05-05 07:25:46

我有一个 createMaterialTopTabNavigator，当我按下以在另一个屏幕上导航时，我想隐藏选项卡和标题但显示当前标题（“Pronostics 详细信息”）。这是可能的 ？

在此处输入图片说明

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

我试图将标题设置为“空”，但当前标题也被隐藏了..

预先感谢您的帮助

1个回答

如果 API 支持隐藏createMaterialTopTabNavigator()的能力，生活就会变得简单！但是此选项存在于底部选项卡，而不是顶部。

经过研究和测试，我认为可以隐藏选项卡和标题。这是玩嵌套导航的问题。（灵感来自：https : //github.com/react-navigation/react-navigation/issues/1979和Hide parent's navigation header from the nested navigator）

例如：

在此处输入图片说明 在此处输入图片说明

按屏幕 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

其它你可能感兴趣的问题
上一篇React-table css 未加载是 webpack 的问题吗？ 下一篇离子react类型不可分配