MobX с React-навигацией в собственном приложении реагировать - PullRequest
Новая
       5

MobX с React-навигацией в собственном приложении реагировать

0 голосов
/ 06 марта 2020

Я начинаю с реагировать на родной. Я использую UI kitten в качестве библиотеки пользовательского интерфейса для моего приложения.

Я добавил реагирующую навигацию в свое приложение, следуя инструкциям в UI Kitten configure-navigation

Я хотел интегрировать библиотеку управления состоянием данных, в частности MobX, для управления данными приложения, для которых я следую учебному пособию по Alligator.io - MobX с реагирующим собственным

Теперь эти два учебника / руководства не зависят друг от друга, в одном показано, как интегрировать реагирующую навигацию, а в другом показано, как интегрировать mobx независимо, и мне нужно использовать обе библиотеки вместе в одном приложении.

Я не могу получить доступ к обоим провайдерам в моих компонентах, как показано ниже:

App.tsx 

import React from 'react';
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { mapping, light as theme } from '@eva-design/eva';
import { AppNavigator } from './navigation/navigation.component';

const App = () => (
  <React.Fragment>
    <IconRegistry icons={EvaIconsPack}/>
    <ApplicationProvider mapping={mapping} theme={theme}>
      <AppNavigator/>
    </ApplicationProvider>
  </React.Fragment>
);

export default App;

navigation.component.tsx 

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'mobx-react';
import AppStore from '../store/AppStore';
import { HomeScreen } from '../screens/home.component';
import { DetailsScreen } from '../screens/details.component';

const Stack = createStackNavigator();

const HomeNavigator = () => (
    <Stack.Navigator headerMode='none'>
        <Stack.Screen name='Home' component={HomeScreen} />
        <Stack.Screen name='Details' component={DetailsScreen} />
    </Stack.Navigator>
);

export const AppNavigator = () => (
    <Provider store={AppStore}>
        <NavigationContainer>
            <HomeNavigator />
        </NavigationContainer>
    </Provider>
);

AppStore.tsx 

import { decorate, observable, action } from "mobx";

class AppStore {
    loading = true;

    sampleText = "this is sample text";

    loadingCompleted() {
        this.loading = false;
    }

    toggleLoading() {
        this.loading = this.loading ? false : true;
    }
}

decorate(AppStore, {
    loading: observable,
    sampleText: observable,
    loadingCompleted: action,
    toggleLoading: action
});

export default new AppStore();

details.component.tsx (невозможно получить доступ к магазину MobX здесь и аналогично в домашнем компоненте тоже) 

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';

const BackIcon = (style: any) => (
    <Icon {...style} name='arrow-back' />
);


// are the function parameters right? passing props for the MobX store as shown in alligator.io tutorial   
export const DetailsScreen = ({ navigation }: any, props: any) => { 

    console.log(navigation); // this works as it should.
    console.log(props); // this doesnt work and is empty {}

    // const { loading, loadingCompleted, toggleLoading, sampleText } = props.store;

    const navigateBack = () => {
        navigation.goBack();
    };

    const BackAction = () => (
        <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
    );

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <TopNavigation title='MyApp' alignment='center' leftControl={BackAction()} />
            <Divider />
            <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text category='h1'>DETAILS</Text>
                {/* <Text category='h1'>{sampleText}</Text> */}
            </Layout>
        </SafeAreaView>
    );
};
...