我遇到了反应导航性能的问题。今天，我更新了导致该问题的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;
答案 0 :(得分：1)
问题解决了，它与反应导航无关，而与npm有关。
npm审核修复-修复了该问题