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

Question

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

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

我试过这个：（代码片段 #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 的代码。把它放在那里似乎 return 一个奇怪的错误。

有人可以帮助我吗？

Answer 1

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

import React, {Component} from 'react'

关于为什么要导入的解释，我想可以解释为什么。

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

React Native Navigation - Putting navigationOptions of Stack Navigator inside Bottom Tab Navigator

react-native

react-navigation

react-navigation-stack