低性能 Android 中的反应导航优化

Question

我现在有一个简单的

react-navigation

代码，但它会延迟每条路线大约200毫秒 - 即使在捆绑的情况下，在较差的Android系统上也会延迟500毫秒

已知该设备运行 Android，配备 2GB RAM 和 8GB 存储空间（删除系统文件等后剩余约 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",

下面是我的反应导航代码

/* 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 快一点，但按钮动画卡住了

Answer 1

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

1. 如果您有很长的列表，您可能需要考虑使用 FlatList 而不是 ScrollView。由于 FlatList 仅渲染当前视图中的元素，因此在渲染大型列表时效率更高。

2. 压缩和优化照片，使其更具可读性。大型图像文件可能会严重影响性能。对于图片优化，您可以使用 ImageOptim 等程序或 Android Studio 等平台提供的程序。

3. 减少动画：尽量减少复杂动画的使用，尤其是在具有大量移动部件的显示器上。考虑使动画更短或更简单。

4. 代码拆分：要仅加载当前屏幕所需的代码，请考虑代码拆分。这可以加快启动速度并减小初始包的大小。

5. React 导航性能选项：要增强性能，请尝试修改路由器组件中的 screenOptions。例如，您可以尝试几种过渡动画：

6. JavaScript 代码应使用 React DevTools 或 Reactotron 等工具进行优化和分析。找到任何性能瓶颈并进行优化。

7. 使用React Native Hermes：专门为运行React Native而设计的JavaScript引擎称为Hermes。启用后，Hermes 可以加快启动时间并使用更少的内存。

8. 内存管理：使用 React DevTools 等资源来查找内存泄漏。特别是，如果您使用本机模块，请确保适当地清理资源。

9. 更新依赖项：确保 React Native、React Navigation 和其他依赖项在您的系统上是最新的。后续版本中可能会包含错误修复和性能增强。

10. 考虑本机导航库：React-native-screens 是一种本机导航库，您可能希望使用它来获得更好的性能，具体取决于您的应用程序的复杂程度。

11. 真机测试：建议尽可能在真机上进行测试，尤其是规格较小的目标设备。