Как экспортировать createStackNavigator как класс в React Native? - PullRequest
Новая
       52

Как экспортировать createStackNavigator как класс в React Native?

1 голос
/ 24 мая 2019

Я прочитал здесь , что использование 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',
});

1 Ответ

0 голосов
/ 24 мая 2019

в соответствии с моим пониманием из ошибки, я думаю, что проблема не в вашем createStackNavigator, а в том, что теперь из 3-й версии реакции-навигации вы должны вручную передать createStackNavigator в createAppContainer, чтобы созданный контейнер мог бытьосновной компонент для 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;
...