如何在 React Native 中将 createStackNavigator 作为类导出?

问题描述

我在此处阅读了使用 createStackNavigator 作为组件的内容类是可能的，我正在努力实现这一目标，但我总是遇到错误.

I read here that using the the createStackNavigator as a Component class was possible, and I was trying to achieve that, but I always got an error.

代替这个:

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;

但我总是收到这个错误:

But I always get this error:

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

所以，我尝试通过添加导航道具来纠正它，如下所示:

So, I tried to correct it, by adding the navigation prop, like so:

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

但后来我遇到了一个新错误

But then I got a new error

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 商店.这样，当我在 store 中更改 de 背景颜色时，它会在每个注入 store 并正在观察的堆栈上更改.

Is this possible? The main reason I want to do it, is to be able to @inject and use @observer for mobx stores. This way when I change de background color in the store, it will change on every stack that has the store injected and is observing.

编辑

我从哪里调用 MessagesStack:

Where I'm calling MessagesStack from:

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

推荐答案

根据我对错误的理解，我认为问题不在于您的 createStackNavigator，实际问题是现在从 react-navigation 的第 3 版开始，您必须手动将 createStackNavigator 传入 createAppContainer，这样创建的 Container 就可以作为 React Native 渲染的主要组件

according to my understanding from the error I think the issue is not with your createStackNavigator the actual problem is that now from version 3 of react-navigation you have to manually pass the createStackNavigator into the createAppContainer so that the created Container can be the main component for React native to render

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;

这篇关于如何在 React Native 中将 createStackNavigator 作为类导出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！