React Native Navigation - 将 Stack Navigator 的 navigationOptions 放入 Bottom Tab Navigator

Posted 2023-03-15

【中文标题】React Native Navigation - 将 Stack Navigator 的 navigationOptions 放入 Bottom Tab Navigator

【英文标题】：React Native Navigation - Putting navigationOptions of Stack Navigator inside Bottom Tab Navigator

【发布时间】：2019-03-15 09:24:21

【问题描述】：

正如documentation of the createBottomTabNavigator 中所说，导航器内的屏幕可以包含一个名为navigationOptions 的变量，它们可以在其中配置不同的设置。我使用自己的组件成功地做到了这一点，但是，当我尝试将 Stack Navigator 放入底部选项卡导航器中时，我遇到了一个问题。

问题：在创建堆栈导航器以自定义与我创建的堆栈导航器相对应的底部选项卡导航器的tabIcon 时，我不确定将navigationOptions 变量放在哪里。

我试过这个：（代码片段#1）

const navigator = createStackNavigator(
    
        'MainKYCScreen': 
            screen: KYCScreen
        
    ,
    
    initialRouteName: "MainKYCScreen"
    ,
);

const AppContainer = createAppContainer(navigator);

// navigationOptions - start
AppContainer.navigationOptions = 
    tabBarIcon: ( focused ) => (
        <NavButtonContainer focused=focused>
            <KYCIcon status=KYCIcon.TYPE_RED />
        </NavButtonContainer>
    )
;
// navigationOptions - end

export default AppContainer;

还有这个：（代码片段#2）

const navigator = createStackNavigator(
    
        'MainKYCScreen': 
            screen: KYCScreen
        
    ,
    
        initialRouteName: "MainKYCScreen"
    ,
);

const AppContainer = createAppContainer(navigator);

export default class KYCNavigator extends AppContainer 
    // navigationOptions - start
    static navigationOptions = 
        tabBarIcon: ( focused ) => (
            <NavButtonContainer focused=focused>
                <KYCIcon status=KYCIcon.TYPE_RED />
            </NavButtonContainer>
        )
    
    // navigationOptions - end

将代码从 navigationOptions - start 删除到 navigationOptions - end。把它放在那里似乎会返回一个奇怪的错误。

有人可以帮帮我吗？

【参考方案1】：

关于您的错误，只需从“react”包中导入 React。

import React, Component from 'react' 

为什么要导入，我觉得this可以解释一下。

【讨论】：

不错！我试过了，它奏效了！ :D 我使用了代码 sn-p #2 并将导入附加到代码上方。谢谢！