如何在React Native中將createStackNavigator導出為類？

Question

我在這里閱讀到可以將createStackNavigator用作Component類，並且我試圖實現這一點，但是我總是遇到錯誤。

代替這個：

export default createStackNavigator({
    Messages
}, {
    defaultNavigationOptions: {
        gesturesEnabled: false
    }
})

我嘗試了這個：

class MessagesStack extends React.Component {
    render() {
        const RouteConfigs = {
            Messages
        };

        const NavigatorConfigs = {
            defaultNavigationOptions: {
                gesturesEnabled: false
            }
        };

        const Stack = createStackNavigator(RouteConfigs, NavigatorConfigs);
        return <Stack />;
    }
}

export default MessagesStack;

但是我總是會收到這個錯誤：

Invariant Violation: Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html

因此，我嘗試通過添加導航道具來更正它，如下所示：

return <Stack navigation={this.props.navigation} />;

但是后來我得到了一個新錯誤

TypeError: TypeError: No "routes" found in navigation state. Did you try to pass the navigation prop of a React component to a Navigator child? See https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop

這可能嗎？ 我想要這樣做的主要原因是能夠@inject並將@observer用於mobx存儲。 這樣，當我更改商店中的背景顏色時，它將在注入商店並正在觀察的每個堆棧中發生變化。

編輯

我從以下位置調用MessagesStack的位置：

export default createBottomTabNavigator({
    DayStack: {
        screen: DayStack,
        navigationOptions: {...}
    }
    MessagesStack: {
        screen: MessagesStack,
        navigationOptions: {...}
    }
    ... OtherStacks here...
}, {
    initialRouteName: 'DayStack',
});

Answer 1

根據我對錯誤的理解，我認為問題不在於您的createStackNavigator，實際的問題是，現在從反應導航的版本3開始，您必須手動將createStackNavigator傳遞到createAppContainer中，以便創建的Container可以用作反應原生渲染

import { createAppContainer, createStackNavigator } from 'react-navigation';
// you can also import from @react-navigation/native

const AppNavigator = createStackNavigator(...);

// you have to pass the app navigator into app container like this
const AppContainer = createAppContainer(AppNavigator);

// Now AppContainer is the main component for React to render

export default AppContainer;