Question

我遇到了反应导航性能的问题。今天，我更新了导致该问题的React Native Expo Project中使用的库版本。然后我没有意识到导航性能不佳，所以将当前版本的应用程序推送到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审核修复-修复了该问题

更新库后以性能响应导航问题

1 个答案: