我现在有一个简单的react-navigation
代码,但它会在糟糕的Android系统上延迟200 ms-500 ms左右的每一条路由,即使是捆绑
该设备是已知的运行Android与2GB的RAM和8 GB的存储(大约4GB后删除系统文件等).我用adb shell dumpsys meminfo看到,还有约1.3GB左我想知道如何优化react-native
或react-navigation
,使他的页面不会卡住
我试过用react native做动画,
使用的react-navigation包为
"@react-native-community/async-storage": "^1.12.1",
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.17",
字符串
下面是我的react-navigation代码
/* eslint-disable react/react-in-jsx-scope */
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Standby from '../View/Standby/Standby';
import DeviceList from '../View/DeviceList/DeviceList';
const router = () => {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false, animation: 'none'}}>
<Stack.Screen name="Standby" component={Standby} />
<Stack.Screen name="DeviceList" component={DeviceList} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default router;
型
这是我的导航页代码
import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
const jumpDeviceList = () => {
navigation.navigate('DeviceList');
};
型
我从react native的Pressable
用法开始
<Pressable onPress={()=>jumpDeviceList()}>
<Text>I'm pressable!</Text>
</Pressable>
型
但他的视觉潜伏期在300到500毫秒之间
当前使用
<TouchableOpacity
onPress={() => {
jumpDeviceList();
}}>
<Text style={{fontSize: 30, color: '#FFF'}}>jump</Text>
</TouchableOpacity>
型
它也非常延迟,但比Pressable快一点,但按钮动画卡住了
1条答案
按热度按时间nwo49xxi1#
**这些是我在下面详细提到的,我们在构建或开发React Native应用程序时需要考虑的事情。
1.如果你有很长的列表,你可能需要考虑使用FlatList而不是ScrollView。因为FlatList只呈现当前视图中的元素,所以在呈现大列表时更有效。
1.压缩和优化照片,使其更具可读性。大型图像文件可能会严重影响性能。对于图片优化,您可以使用ImageOptim等程序或Android Studio等平台提供的程序。
1.减少动画:尽量少用复杂的动画,特别是在有很多活动部件的显示器上。考虑使动画更短或更简单。
1.代码拆分:要只加载当前屏幕所需的代码,请考虑代码拆分。这可以加快启动速度并减少初始包的大小。
1.使用React Native爱马仕:专门为运行React Native而设计的JavaScript引擎被称为爱马仕。启用后,爱马仕可以加快启动时间并使用更少的内存。
1.内存管理:使用React DevTools等资源来查找内存泄漏。特别是,如果您使用本机模块,请确保适当地清理资源。
1.更新权限:确保React Native、React Navigation和其他依赖项在您的系统上是最新的。Bug修复和性能增强可能会包含在更高版本中。
1.考虑一下原生导航库:React-native-screens是一个原生导航库,你可能想使用它来获得更好的性能,这取决于你的应用有多复杂。
1.真实的器械测试:建议尽可能在真实的器械上进行测试,尤其是在规格较低的目标器械上。