Блог

Главная - Вопросы по программированию - Проблема с производительностью навигации React после обновления библиотек

Проблема с производительностью навигации React после обновления библиотек

#react-native #npm #react-navigation #expo

#react-native #npm #реакция-навигация #выставка

Вопрос:

я столкнулся с проблемой с производительностью навигации react. Сегодня я обновил версию библиотек, которые я использую в своем проекте React Native Expo, что вызвало эту проблему. Затем, не зная о плохой производительности навигации, я отправил текущую версию своего приложения в репозиторий git. Когда я понял, что навигация перестала работать гладко, я восстановил ее до предыдущей версии. Я удалил каталоги node_modules и package-lock.json и очистил кэш npm, затем снова запустил установку npm с предыдущей версией библиотек, но это совсем не помогло. Даже когда я восстановил версию 2-недельной давности и установил указанную версию библиотек, приложение по-прежнему работает не так, как раньше.

Текущая версия package.json:

 {
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "expo": "^32.0.6",
    "prop-types": "^15.7.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-animatable": "^1.3.2",
    "react-native-datepicker": "^1.7.2",
    "react-native-elements": "^1.1.0",
    "react-native-flash-message": "^0.1.11",
    "react-native-gifted-chat": "^0.7.3",
    "react-native-google-places-autocomplete": "^1.3.9",
    "react-native-modal": "^7.0.2",
    "react-native-size-matters": "^0.2.1",
    "react-navigation": "^3.9.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-axios-middleware": "^4.0.0",
    "redux-persist": "^5.10.0",
    "redux-persist-expo-securestore": "^0.1.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1"
  },
  "private": true
}

Предыдущая версия package.json:

 {
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "expo": "^32.0.6",
    "prop-types": "^15.7.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-animatable": "^1.3.1",
    "react-native-datepicker": "^1.7.2",
    "react-native-elements": "^1.1.0",
    "react-native-flash-message": "^0.1.11",
    "react-native-gifted-chat": "^0.7.3",
    "react-native-google-places-autocomplete": "^1.3.9",
    "react-native-modal": "^7.0.2",
    "react-native-size-matters": "^0.1.6",
    "react-navigation": "^3.3.2",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-axios-middleware": "^4.0.0",
    "redux-persist": "^5.10.0",
    "redux-persist-expo-securestore": "^0.1.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

Файл навигации:

 import React from "react";
import { Animated, Easing, SafeAreaView } from "react-native";
import {
  createAppContainer,
  createDrawerNavigator,
  createStackNavigator,
  createSwitchNavigator
} from "react-navigation";
import AddAppsScreen from "../screens/AddAppsScreen";
import BoardScreen from "../screens/BoardScreen";
import FavoriteScreen from "../screens/FavoriteScreen";
import HomeScreen from "../screens/HomeScreen";
import AuthLoadingScreen from "../screens/AuthLoadingScreen";
import LoginScreen from "../screens/LoginScreen";
import NoticeScreen from "../screens/NoticeScreen";
import ProfileScreen from "../screens/ProfileScreen";
import SearchResultScreen from "../screens/SearchResultScreen";
import SearchScreen from "../screens/SearchScreen";
import UserDetailsScreen from "../screens/UserDetailsScreen";
import SideMenu from "./SideMenu";
import NavigationBar from "./NavigationBar";
import MessagesScreen from "../screens/MessagesScreen";
import ChatRoomScreen from "../screens/ChatRoomScreen";
import { moderateScale } from "react-native-size-matters";

const RootNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Board: {
      screen: BoardScreen
    },
    Notice: {
      screen: NoticeScreen
    },
    Profile: {
      screen: ProfileScreen
    },
    Favorite: {
      screen: FavoriteScreen
    },
    Search: {
      screen: SearchScreen
    },
    SearchResult: {
      screen: SearchResultScreen
    },
    UserDetails: {
      screen: UserDetailsScreen
    },
    AddApps: {
      screen: AddAppsScreen
    },
    Messages: {
      screen: MessagesScreen
    },
    ChatRoom: {
      screen: ChatRoomScreen
    }
  },
  {
    headerMode: "none",
    initialRouteName: "Home",
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing
      },
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const width = layout.initWidth;
        const translateX = position.interpolate({
          inputRange: [index - 1, index, index   1],
          outputRange: [width, 0, 0]
        });

        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1]
        });

        return { opacity, transform: [{ translateX: translateX }] };
      }
    })
  }
);

const HomeNavWrapper = createStackNavigator(
  {
    RootNavigator: {
      screen: RootNavigator
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      header: <NavigationBar navigation={navigation} />
    }),
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing
      },
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const width = layout.initWidth;
        const translateX = position.interpolate({
          inputRange: [index - 1, index, index   1],
          outputRange: [width, 0, 0]
        });

        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1]
        });

        return { opacity, transform: [{ translateX: translateX }] };
      }
    })
  }
);

const HomeDrawerNavigator = createDrawerNavigator(
  {
    HomeNavWrapper: HomeNavWrapper
  },
  {
    contentComponent: SideMenu,
    drawerWidth: moderateScale(280)
    // drawerPosition: "right"
  }
);

const AppNavigator = createSwitchNavigator(
  {
    AuthLoading: {
      screen: AuthLoadingScreen
    },
    Login: {
      screen: LoginScreen
    },
    HomeDrawerNavigator: {
      screen: HomeDrawerNavigator
    }
  },
  {
    // initialRouteName: "HomeDrawerNavigator"
    initialRouteName: "AuthLoading"
  }
);

const MainNavigation = createAppContainer(AppNavigator);

export default MainNavigation;

Комментарии:

1. Почему у вас так много компонентов в вашем навигаторе стека? Я надеюсь, вы знаете, что все они остаются смонтированными. Либо используйте this.props.navigation.isFocused или push компоненты для навигации при навигации. Будьте осторожны и с вашим redux. Если вы предоставили общий доступ prop к своим представлениям, все они будут повторно отображаться, потому что все смонтировано.

Ответ №1:

Проблема решена, она была связана не с react-navigation, а с npm.

исправление аудита npm — исправлена эта проблема