Question

我正在开始使用本机响应。我正在使用UI kitten作为应用程序的UI库。

我按照UI Kitten configure-navigation上的指南向应用程序添加了反应导航

我想集成一个数据状态管理库，特别是MobX来管理应用程序数据，我正在关注Alligator.io - MobX with react native上的教程

现在，这两个教程/指南彼此独立，一个显示了如何集成react-navigation，另一个显示了如何独立集成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>
    );
};

在React Native应用程序中具有React导航的MobX

0 个答案: