react-navigation 更新到 v2 后，标题为空

Posted 2023-02-22

【中文标题】react-navigation 更新到 v2 后，标题为空

【英文标题】：Header is empty after react-navigation updated to v2

【发布时间】：2018-10-20 21:34:23

【问题描述】：

将我的 react-native 项目的 react-navigation 包从 1.5.8 更新到 2.0.1 后，我的标题在 TabNavigator 的所有选项卡上都变空了。在其他屏幕上它像以前一样工作。

标签示例仪表板：

class Dashboard extends PureComponent 
    static navigationOptions = ( navigation ) => 
        return 
            title: strings.dashboard_header_title,
            headerLeft: renderMenu(navigation)
        ;
    ;

    ...


export default connect((state, ownProps) => 
    ...
)(Dashboard);

const renderMenu = navigation => 
    return <ImageButton
        style=styles.padding
        imageStyle=styles.tintWhite
        image=require('../../../res/images/menu.png')
        onPress=navigation.state.params && navigation.state.params.toggleSideMenu/>

它适用于旧版本的 react-navigation。我在堆栈导航器中使用react-redux 和标签导航器。

标签导航器：

const routeConfig = 
    Dashboard: 
        screen: Dashboard,
        resource: 'dashboard',
        navigationOptions:  tabBarIcon: (tintColor) => <Image style=tintColor source=require('../../../res/images/tab-dashboard.png')/> 
    ,
    ...
;

const drawConfig = 
    lazy: false,
    animationEnabled: false,
    swipeEnabled: false,
    tabBarPosition: 'bottom',
    tabBarOptions: 
        upperCaseLabel: false,
        activeBackgroundColor: 'white',
        activeTintColor: colors.main,
        inactiveTintColor: colors.normal,
        showIcon: true,
        style: 
            height: 48,
            backgroundColor: 'white',
            borderTopColor: colors.border,
            borderTopWidth: values.borderWidth,
            elevation: 0
        ,
        labelStyle: 
            fontSize: 11,
            marginBottom: 0
        ,
        tabStyle: 
            padding: 3,
            paddingTop: Platform.OS === 'android' ? 4 : 3
        ,
        indicatorStyle: 
            height: 0,
            width: 0
        
    


const InnerTabNavigator = createBottomTabNavigator(routeConfig, drawConfig);

class TabBarNavigator extends PureComponent

    ...
    render() 
        return (
            <InnerTabNavigator
                ...this.props.ownProps
                navigation=
                    ...this.props.navigation,
                    state: this.state
                
            />
        );
    
    ...


TabBarNavigator.router = InnerTabNavigator.router;

主导航器：

const MainNavigatorInner = createStackNavigator(
    ...
    TabBarNavigator:  screen: TabBarNavigator ,
    ...
, 
    initialRouteName: 'SignIn',
    headerMode: 'screen',
    navigationOptions: ( navigation ) => 
        return 
            headerTintColor: 'white',
            headerTitleStyle: styles.headerTitle,
            headerStyle: 
                backgroundColor: colors.main,
                shadowColor: 'transparent',
                elevation: 0,
                borderBottomWidth: values.borderWidth,
                borderBottomColor: colors.borderHeader,
                height: values.headerHeight
            ,
        ;
    ,
    cardStyle: 
        backgroundColor: colors.background
    
);

export default class MainNavigator extends PureComponent 
    ...
    render() 
        return (
            ...
            <MainNavigatorInner
                ref='navigation'
                screenProps=this.screenProps
                onNavigationStateChange=this._onNavigationStateChange/>
            ...
        );
    
    ...

【问题讨论】：

您能否添加一个代码示例来说明您如何定义导航器？

@needsleep 添加。

【参考方案1】：

昨天我更新我的 react-navigation 时也遇到了同样的问题。我知道这不是最佳选择，但请尝试在您的 drawconfig 中添加 tabBarIcon：

const drawConfig = 
    lazy: false,
    animationEnabled: false,
    swipeEnabled: false,
    tabBarPosition: 'bottom',
    navigationOptions: ( navigation ) => (
      tabBarIcon: ( focused, tintColor ) => 
        const  routeName  = navigation.state;
        let icon;

        if (routeName === "SomeRouteName") 
          icon = require("src/assets/someFile");
        else if (routeName === "Some other route name") 
              if (focused) 
                icon = require("src/assets/someFile.png");
               else 
               icon = require("src/assets/someFile.png");
              
        

        return <Image source=icon style= width: 30, height: 30  />;
      
    ),
    tabBarOptions: 
        upperCaseLabel: false,
        activeBackgroundColor: 'white',
        activeTintColor: colors.main,
        inactiveTintColor: colors.normal,
        showIcon: true,
        style: 
            height: 48,
            backgroundColor: 'white',
            borderTopColor: colors.border,
            borderTopWidth: values.borderWidth,
            elevation: 0
        ,
        labelStyle: 
            fontSize: 11,
            marginBottom: 0
        ,
        tabStyle: 
            padding: 3,
            paddingTop: Platform.OS === 'android' ? 4 : 3
        ,
        indicatorStyle: 
            height: 0,
            width: 0
        
    

【讨论】：

这没有帮助。

【参考方案2】：

我也有同样的问题，我的解决方案已添加到我的 stacknavigator headerMode: 'auto' 属性，我使用 expo 模板并添加了 RootNavigation 文件 headerMode: 'auto' 也适用于我，

这样的导航 =>

const RootStackNavigator = createStackNavigator(
  
    Main: 
      screen: MainTabNavigator,
    ,
  ,
  
    navigationOptions: () => (
      headerTitleStyle: 
        fontWeight: 'normal',
      ,
    ),
 headerMode: 'auto'
  
);