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

Question

如documentation of the createBottomTabNavigator中所述，导航器内的屏幕可以包含一个名为navigationOptions的变量，在其中它们可以配置不同的设置。我使用自己的组件成功完成了此操作，但是，当我尝试将“堆栈导航器”放入“底部选项卡导航器”中时，遇到了一个问题。

问题：：我不确定在创建堆栈导航器以自定义与该堆栈相对应的底部标签导航器的navigationOptions时将tabIcon变量放在何处我创建的导航器。

我尝试了这个：（代码段＃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。放在那里似乎会返回一个奇怪的错误。

有人可以帮我吗？

Answer 1

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

import React, {Component} from 'react' 

为解释为什么应该导入它，我认为this可以解释为什么。