低性能Android中的React导航优化

zc0qhyus  于 2024-01-04  发布在  Android
关注(0)|答案(1)|浏览(161)

我现在有一个简单的react-navigation代码,但它会在糟糕的Android系统上延迟200 ms-500 ms左右的每一条路由,即使是捆绑
该设备是已知的运行Android与2GB的RAM和8 GB的存储(大约4GB后删除系统文件等).我用adb shell dumpsys meminfo看到,还有约1.3GB左我想知道如何优化react-nativereact-navigation,使他的页面不会卡住
我试过用react native做动画,

使用的react-navigation包为

  1. "@react-native-community/async-storage": "^1.12.1",
  2. "@react-navigation/native": "^6.1.9",
  3. "@react-navigation/native-stack": "^6.9.17",

字符串

下面是我的react-navigation代码

  1. /* eslint-disable react/react-in-jsx-scope */
  2. import {NavigationContainer} from '@react-navigation/native';
  3. import {createNativeStackNavigator} from '@react-navigation/native-stack';
  4. import Standby from '../View/Standby/Standby';
  5. import DeviceList from '../View/DeviceList/DeviceList';
  6. const router = () => {
  7. const Stack = createNativeStackNavigator();
  8. return (
  9. <NavigationContainer>
  10. <Stack.Navigator screenOptions={{headerShown: false, animation: 'none'}}>
  11. <Stack.Screen name="Standby" component={Standby} />
  12. <Stack.Screen name="DeviceList" component={DeviceList} />
  13. </Stack.Navigator>
  14. </NavigationContainer>
  15. );
  16. };
  17. export default router;

这是我的导航页代码

  1. import {useNavigation} from '@react-navigation/native';
  2. const navigation = useNavigation();
  3. const jumpDeviceList = () => {
  4. navigation.navigate('DeviceList');
  5. };


我从react native的Pressable用法开始

  1. <Pressable onPress={()=>jumpDeviceList()}>
  2. <Text>I'm pressable!</Text>
  3. </Pressable>


但他的视觉潜伏期在300到500毫秒之间
当前使用

  1. <TouchableOpacity
  2. onPress={() => {
  3. jumpDeviceList();
  4. }}>
  5. <Text style={{fontSize: 30, color: '#FFF'}}>jump</Text>
  6. </TouchableOpacity>


它也非常延迟,但比Pressable快一点,但按钮动画卡住了

nwo49xxi

nwo49xxi1#

**这些是我在下面详细提到的,我们在构建或开发React Native应用程序时需要考虑的事情。

1.如果你有很长的列表,你可能需要考虑使用FlatList而不是ScrollView。因为FlatList只呈现当前视图中的元素,所以在呈现大列表时更有效。
1.压缩和优化照片,使其更具可读性。大型图像文件可能会严重影响性能。对于图片优化,您可以使用ImageOptim等程序或Android Studio等平台提供的程序。
1.减少动画:尽量少用复杂的动画,特别是在有很多活动部件的显示器上。考虑使动画更短或更简单。
1.代码拆分:要只加载当前屏幕所需的代码,请考虑代码拆分。这可以加快启动速度并减少初始包的大小。

  1. React导航性能选项:要增强性能,请尝试修改路由器组件中的screenOptions。例如,您可以尝试使用几种过渡动画:
  2. JavaScript代码应该使用React DevTools或Reactotron等工具进行优化和分析。找到任何性能瓶颈并进行优化。
    1.使用React Native爱马仕:专门为运行React Native而设计的JavaScript引擎被称为爱马仕。启用后,爱马仕可以加快启动时间并使用更少的内存。
    1.内存管理:使用React DevTools等资源来查找内存泄漏。特别是,如果您使用本机模块,请确保适当地清理资源。
    1.更新权限:确保React Native、React Navigation和其他依赖项在您的系统上是最新的。Bug修复和性能增强可能会包含在更高版本中。
    1.考虑一下原生导航库:React-native-screens是一个原生导航库,你可能想使用它来获得更好的性能,这取决于你的应用有多复杂。
    1.真实的器械测试:建议尽可能在真实的器械上进行测试,尤其是在规格较低的目标器械上。

相关问题