reactjs – React Navigation Header随屏幕变化

发布时间：2020-12-15 05:07:06 所属栏目：百科来源：网络整理

导读：我有一个StackNavigation并想要一个默认的Header(组件头),并希望“深度页面”显示为React Navigation生成的默认头. 在我的索引页面**索引**中,只需要Header组件(第一个标题)…但是显示另一个空白标题：在我的“深度页面”** Teste **只想让RNav自动生成的标

我有一个StackNavigation并想要一个默认的Header(组件头),并希望“深度页面”显示为React Navigation生成的默认头.

在我的索引页面**索引**中,只需要Header组件(第一个标题)…但是显示另一个空白标题：

在我的“深度页面”** Teste **只想让RNav自动生成的标题和后退按钮(第二个标题)……但是第一个标题出现了.

这是我的导航配置：

const RootNavigator = StackNavigator({
    Welcome: {screen: Welcome},User: {
        screen: TabNavigator({
            Clientes: {
                screen: StackNavigator({
                    Index: {screen: Clientes},Teste: {
                        screen: Teste,header: undefined
                    }
                },{
                    header: null,navigationOptions: {
                        tabBarIcon: () => (
                            <Icon name="list-alt" size={22} color="#ffffff" />
                        )
                    }
                })
            },Opcoes: { screen: Opcoes }
        },{
            tabBarPosition: 'bottom',tabBarOptions: {
                showLabel: false,activeTintColor: '#fff',showIcon: true,inactiveTintColor: '#ccc',indicatorStyle: {
                    backgroundColor: '#ccc'
                },style: {
                    backgroundColor: '#536878'
                }
            }
        })
    },},{
    initialRouteName: 'User',navigationOptions: {
        header: props => <Header {...props} />
    }
});

export default RootNavigator;

每个StackNavigator都带有一个标题,第一个来自RootNavigator = StackNavigator({和你看到的底部来自Clientes：{screen：StackNavigator({.

首先,你的Clientes中的seams header：null：{screen：StackNavigator({没有任何效果.你应该尝试使用headerMode：’none’,这将从Index删除空白标题,但也从Teste删除标题标题和后退按钮,这并不能解决您的所有问题.

所以我会建议不同的导航器结构：

RootNavigator(StackNavigator)
- Welcome
- Index
- Teste
- User(TabNavigator)
    - Clientes 
    - Opcoes

你接下来应该做的是为组件内部的Teste设置不同的标题(默认值,后退按钮),如下所示：

import { Header } from 'react-navigation';

Teste.navigationOptions = ({ navigation,screenProps }) => ({
    return {
        header: <Header {...screenProps} {...navigation} />
    }
});

您甚至可以创建自己的标头Component并在Teste.navigationOptions中使用它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!