更新库后，React Navigation问题与性能有关

Question

我遇到了反应导航性能的问题。今天我更新了我在React Native Expo项目中使用的库的版本，这导致了这个问题。然后我没有意识到导航性能不佳，我将我的应用程序的当前版本推送到git存储库。当我意识到导航停止工作时，我恢复到以前的版本。我删除了node_modules和package-lock.json目录并清除了npm缓存，然后再次使用以前版本的库运行npm install，但它根本没有帮助。即使我从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;

Answer 1

问题解决了，它与反应导航无关，而与npm有关。

npm审计修复 - 解决了这个问题