代码之家 › 专栏 › 技术社区 › Igor Martins

根据屏幕反应导航标题的更改

stack-navigator react-navigation react-native reactjs

5

Igor Martins · 技术社区 · 7 年前

我有一个StackNavigation,需要一个默认值 Header (组件标题),并希望“深度页面”显示为React导航生成的默认标题。

在我的索引页中 **Index** ,只需要标题组件(第一个标题)。。。但显示另一个空白标题:

在我的“深度页面” **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;

1 回复 | 直到 7 年前

1

2

zarcode 7 年前

每个StackNavigator都会带来一个标题,第一个标题来自 RootNavigator = StackNavigator({ 你们看到的最底层是从 Clientes: { screen: StackNavigator({ .

首先,接缝 header: null 在你的 客户:{屏幕:StackNavigator({ headerMode: 'none' 相反,这将从中删除空白标题 Index 但也有来自 Teste 有标题和后退按钮,这并不能解决你所有的问题。

因此,我建议采用不同的导航器结构:

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

测试员 在组件内部,如下所示:

import { Header } from 'react-navigation';

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