react-native - 更新库后反应导航问题与性能
问题描述
我遇到了反应导航性能的问题。今天我更新了我在我的 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;
解决方案
问题解决了,它与反应导航无关,而是与 npm 相关。
npm 审计修复- 修复了该问题
推荐阅读
- python - 是否可以检查字符串是否包含数据框单元格(也是字符串)?
- json - Oracle json 查询嵌套数组
- python-3.x - 求Python3新特性指南:“f-string”
- python - 在python的数据框中搜索逗号分隔字符串中的数字
- python - 熊猫:从不一致的行中展平数据
- excel - 计算 ISOWEEK 日历的给定日期的月份或季度
- flutter - 如何在 Flutter 水平条形图上设置最大高度?
- r - 使用bagging函数开发CART决策树后如何计算R-squared?
- angular - 如何为垫子扩展面板制作粘性标题?
- php - 如何使用 PHP 用 HTML 注释字符串(即如何通过偏移量将 HTML 标记插入字符串以维护有效的 HTML)?