Question

我读到here，可以将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，实际的问题是，现在从react-navigation的版本3开始，您必须手动将createStackNavigator传递到createAppContainer中，以便创建的Container可以是React native渲染的主要组件

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导出为类？

1 个答案: