reactjs - react 导航标题随屏幕变化

Question

我有一个 StackNavigation，想要一个默认的 Header (组件标题)，并希望“深层页面”与为 React Navigation 生成的默认标题一起显示。

在我的索引页**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;

Answer 1

每个 StackNavigator 都带有一个 header ，第一个 header 来自 RootNavigator = StackNavigator({)，您看到的底部 header 来自 Clientes: { screen: StackNavigator({.

首先，您的 Clientes: { screen: StackNavigator({) 中的接缝 header: null 没有任何效果。您应该尝试 headerMode: 'none' 相反，这将从 Index 中删除空白标题，还会从 Teste 中删除带有标题和后退按钮的标题，但这并不能解决所有问题你的问题。

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

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

接下来您应该做的是为组件本身内部的 Teste 设置不同的 header (默认 header ，带有后退按钮)，如下所示:

import { Header } from 'react-navigation';

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

您甚至可以制作自己的 header 组件并在 Teste.navigationOptions 中使用它。