Я начинаю с реагировать на родной. Я использую 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>
);
};