反应上下文与反应导航BottomNavigation

时间：2020-01-12 15:28:11

标签： react-native react-navigation react-context react-navigation-stack

我正在使用react-native和react-navigation

我已经为整个应用程序创建了2个createAppContainer，一个为BottomNavigation创建了一个，上下文运行良好，但是react-navigation引发了错误，因为我分别使用2个AppContainerStacks，我试图修改Home组件以消除该问题。 ， 和反应导航问题消失了，但是上下文不再起作用，而且我无法检索来自那里的数据。

我所做的只是从python /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/bin/django-admin.py startproject mysite 中提取数据 在同一地方外面。

我曾经那样使用它们

Home.js 

public void addClassified(@RequestPart(name="data") ClassifiedFormData classifiedFormData,  @RequestPart(name="images") MultipartFile[] images) {

        //  to delete file  
        boolean flag = true;    

        try {
            Classified classified = new Classified();
            classified.setSummary(classifiedFormData.getSummary());
            classified.setDescription(classifiedFormData.getDescription());
            classified.setPrice(classifiedFormData.getPrice());
            classified.setCurrency(classifiedFormData.getCurrency());
            classifiedRepository.save(classified);

            if (true) {
                throw new Exception("The saved Classified should be deleted because of the @Transactional annotation");
            }

            String idAsStr = String.valueOf(classified.getId());
            pathToImagesForThisClassified = Paths.get("images", idAsStr);
            filePaths = storageService.storeAll(pathToImagesForThisClassified, images);
            File thumbnail = imageManipulationService.resize(filePaths.get(classifiedFormData.getThumbnailIndex()),
                    new Dimension(255, 255));
            pathToThumbnailsForThisClassified = Paths.get("thumbnails", idAsStr);
            thumbnailPath = storageService.store(pathToThumbnailsForThisClassified, thumbnail);
            classified.setImagePaths(filePaths);
            classified.setThumbnailImagePath(thumbnailPath);
            classifiedRepository.save(classified);

            Place place = new Place(classified);
            place.setCountry(classifiedFormData.getCountry());
            place.setLabel(classifiedFormData.getLabel());
            place.setLatitude(Double.valueOf(classifiedFormData.getLat()));
            place.setLongitude(Double.valueOf(classifiedFormData.getLon()));
            placeRepository.save(place);

            flag = false;
        } finally {

             if(flag){
                storageService.deleteRecursively(pathToImagesForThisClassified);
                storageService.deleteRecursively(pathToThumbnailsForThisClassified);
             }
        }
    }

tabNavigator.js 

<HomeBottomTabNavigator />

上下文运行良好，但是react-navigation引发错误，因为我分别使用2个AppContainerStacks，我尝试修改Home组件以消除如下所示的问题

Home.js 

/** @flow **/
import React, { useEffect, useState } from 'react';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';

import { useMutation } from '@apollo/react-hooks';
import { GET_USER_DATA } from '../actions/mutations';
import { UserProvider } from '../core/context/userContext';
import { ResponseUtil } from '../core/utils/responseUtils';
import { Layout, withStyles } from '@ui-kitten/components';
import { getAccessToken } from '../core/utils/asyncStorageUtils';
import { HomeBottomTabNavigator } from '../core/navigations/tabNavigator';

type HomeScreenPropsType = {
  themedStyle: {
    container: ViewStyleProp
  }
};

function HomeScreen(props: HomeScreenPropsType): React$Element<any> {
  const { themedStyle } = props;
  const [userData, setUserData] = useState({});
  const [getUserData] = useMutation(GET_USER_DATA);

  useEffect(() => {
    const fetchUserData = async () => {
      const accessToken = await getAccessToken();
      const mutationVariables = { input: { provider: 'facebook', accessToken: accessToken } };
      const response = await getUserData({ variables: mutationVariables });
      const tidyData = ResponseUtil.socialAuthResponseFormatter(response);
      setUserData(tidyData);
    };
    fetchUserData();
  }, [getUserData]);

  return (
    <Layout testID={'home-screen'} style={themedStyle.container}>
      <UserProvider value={userData}>
        <HomeBottomTabNavigator />
      </UserProvider>
    </Layout>
  );
}

export const Home: React$StatelessFunctionalComponent<any> = withStyles(HomeScreen, () => ({
  container: {
    flex: 1
  }
}));

反应导航问题消失了，但是上下文不再起作用，而且我无法检索来自那里的数据。

这是我过去使用上下文的方式

Friends.js 

/** @flow **/
import React from 'react';
import type { NavigationContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer, SafeAreaView } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, Icon } from '@ui-kitten/components';

import { SCREENS } from './screens';
import { Friends } from '../../screens/Friends';
import { Messages } from '../../screens/Messages';
import { Settings } from '../../screens/Settings';

const TabBarComponent = ({ navigation }): React$Element<any> => {
  const onSelect = (index) => {
    const selectedTabRoute = navigation.state.routes[index];
    navigation.navigate(selectedTabRoute.routeName);
  };
  const bottomTabIcon = (style, iconName): React$Element<Icon> => <Icon {...style} name={iconName} />;

  return (
    <SafeAreaView>
      <BottomNavigation selectedIndex={navigation.state.index} onSelect={onSelect}>
        <BottomNavigationTab title={SCREENS.MESSAGES} icon={(style) => bottomTabIcon(style, 'email-outline')} />
        <BottomNavigationTab title={SCREENS.FRIENDS} icon={(style) => bottomTabIcon(style, 'person-outline')} />
        <BottomNavigationTab title={SCREENS.SETTINGS} icon={(style) => bottomTabIcon(style, 'options-2-outline')} />
      </BottomNavigation>
    </SafeAreaView>
  );
};

const TabNavigator = createBottomTabNavigator(
  {
    [SCREENS.MESSAGES]: Messages,
    [SCREENS.FRIENDS]: Friends,
    [SCREENS.SETTINGS]: Settings
  },
  {
    tabBarComponent: TabBarComponent
  }
);

export const HomeBottomTabNavigator: NavigationContainer = createAppContainer(TabNavigator);

这是我创建的上下文文件-> userContext.js 

/** @flow **/
import { UserProvider } from '../core/context/userContext';
import { useMutation } from '@apollo/react-hooks';
import React, { useEffect, useState } from 'react';
import type { NavigationContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer, SafeAreaView } from 'react-navigation';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { BottomNavigation, BottomNavigationTab, Icon, Layout } from '@ui-kitten/components';

import { Messages } from './Messages';
import { Friends } from './Friends';
import { Settings } from './Settings';
import { GET_USER_DATA } from '../actions/mutations';
import { SCREENS } from '../core/navigations/screens';
import { ResponseUtil } from '../core/utils/responseUtils';
import { getAccessToken } from '../core/utils/asyncStorageUtils';

type HomeScreenPropsType = {
  themedStyle: {
    container: ViewStyleProp
  }
};

function HomeScreen(props: HomeScreenPropsType): React$Element<any> {
  const { navigation } = props;
  const [userData, setUserData] = useState({});
  const [getUserData] = useMutation(GET_USER_DATA);

  useEffect(() => {
    const fetchUserData = async () => {
      const accessToken = await getAccessToken();
      const mutationVariables = { input: { provider: 'facebook', accessToken: accessToken } };
      const response = await getUserData({ variables: mutationVariables });
      const tidyData = ResponseUtil.socialAuthResponseFormatter(response);
      setUserData(tidyData);
    };
    fetchUserData();
  }, [getUserData]);

  const onSelect = (index) => {
    const selectedTabRoute = navigation.state.routes[index];
    navigation.navigate(selectedTabRoute.routeName);
  };
  const bottomTabIcon = (style, iconName): React$Element<Icon> => <Icon {...style} name={iconName} />;

  return (
    <Layout testID={'home-screen'}>
      <UserProvider value={userData}>
        <SafeAreaView>
          <BottomNavigation selectedIndex={navigation.state.index} onSelect={onSelect}>
            <BottomNavigationTab title={SCREENS.MESSAGES} icon={(style) => bottomTabIcon(style, 'email-outline')} />
            <BottomNavigationTab title={SCREENS.FRIENDS} icon={(style) => bottomTabIcon(style, 'person-outline')} />
            <BottomNavigationTab title={SCREENS.SETTINGS} icon={(style) => bottomTabIcon(style, 'options-2-outline')} />
          </BottomNavigation>
        </SafeAreaView>
      </UserProvider>
    </Layout>
  );
}

const TabNavigator = createBottomTabNavigator(
  {
    [SCREENS.MESSAGES]: Messages,
    [SCREENS.FRIENDS]: Friends,
    [SCREENS.SETTINGS]: Settings
  },
  {
    tabBarComponent: HomeScreen
  }
);

export const Home: NavigationContainer = createAppContainer(TabNavigator);

0 个答案:

没有答案
相关问题
最新问题