te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>reactjs - What can I do to stop my React-Native Navigation from increasing consumed memory (RAM)? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>reactjs - What can I do to stop my React-Native Navigation from increasing consumed memory (RAM)? - Stack Overflow

    reactjs - What can I do to stop my React-Native Navigation from increasing consumed memory (RAM)? - Stack Overflow

    programmeradmin3浏览0评论

    Recently I have been building a larger scale project using react-native (0.77.1)without leveraging any framework. i.e. bare-workflow. I faced the known issue, that during sessions of interacting with the app ( mainly navigating ) the application was leaking memory because of navigating in my Stack Navigator's Screens. I am using react-navigation ( / ) and have declared my Navigator as the following

    <Stack.Navigator detachInactiveScreens={true}>

    Even in a tiny dummy application, which I have included below, if ran in XCode and navigated sufficiently ( ~15 times ), the initially required 100mb of memory (RAM) will grow to reach 190mb and continue to grow on further, without ever dropping.

    I was thinking it might be caused by the headers not being properly cleared after navigating to a new page, or that perhaps the <Stack.Navigator> would be saving all of the visited Screens in the background.

    Perhaps this is an already resolved issue. But it would be tremendously helpful to continue my project's journey, especially because I am still quite new to react-native. Many Thanks <3

    import React from "react";
import { Button, View } from "react-native";

import { enableScreens } from 'react-native-screens';

enableScreens();

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { SafeAreaProvider } from 'react-native-safe-area-context';

import ScreenOne from "./src/screens/ScreenOne";
import ScreenTwo from "./src/screens/ScreenTwo";
//These are just simple components displaying each a piece of <Text>

export default function App() {
const Stack = createStackNavigator();

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator detachInactiveScreens={true}>
          <Stack.Screen name="screen-1" component={ScreenOne} options={({navigation}) => ({
              headerLeft: () => (
                  <Button title="go to s2" onPress={() => {
                    navigation.setOptions({headerLeft: undefined})
                    navigation.navigate("screen-2")}}/>
              )
          })}/>
          <Stack.Screen name="screen-2" component={ScreenTwo} options={({navigation}) => ({
              headerLeft: () => (
                <Button title="go to s2" onPress={() => {
                  navigation.setOptions({headerLeft: undefined})
                  navigation.navigate("screen-1")}}/>
              )
          })}/>
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

    • I've already tried leveraging the use of useEffect, useMemo, useCallback inside the screen-components, which did not help, as the Navigation is the issue here.

    • As can be seen, I tried to clear the headerLeft: parameter on the press of a button. Didn't prove to be effective

    • Also I tried replacing navigation.navigate(route) with navigation.replace(route), which wasn't successful

    Recently I have been building a larger scale project using react-native (0.77.1)without leveraging any framework. i.e. bare-workflow. I faced the known issue, that during sessions of interacting with the app ( mainly navigating ) the application was leaking memory because of navigating in my Stack Navigator's Screens. I am using react-navigation ( https://reactnavigation./ ) and have declared my Navigator as the following

    <Stack.Navigator detachInactiveScreens={true}>

    Even in a tiny dummy application, which I have included below, if ran in XCode and navigated sufficiently ( ~15 times ), the initially required 100mb of memory (RAM) will grow to reach 190mb and continue to grow on further, without ever dropping.

    I was thinking it might be caused by the headers not being properly cleared after navigating to a new page, or that perhaps the <Stack.Navigator> would be saving all of the visited Screens in the background.

    Perhaps this is an already resolved issue. But it would be tremendously helpful to continue my project's journey, especially because I am still quite new to react-native. Many Thanks <3

    import React from "react";
import { Button, View } from "react-native";

import { enableScreens } from 'react-native-screens';

enableScreens();

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { SafeAreaProvider } from 'react-native-safe-area-context';

import ScreenOne from "./src/screens/ScreenOne";
import ScreenTwo from "./src/screens/ScreenTwo";
//These are just simple components displaying each a piece of <Text>

export default function App() {
const Stack = createStackNavigator();

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator detachInactiveScreens={true}>
          <Stack.Screen name="screen-1" component={ScreenOne} options={({navigation}) => ({
              headerLeft: () => (
                  <Button title="go to s2" onPress={() => {
                    navigation.setOptions({headerLeft: undefined})
                    navigation.navigate("screen-2")}}/>
              )
          })}/>
          <Stack.Screen name="screen-2" component={ScreenTwo} options={({navigation}) => ({
              headerLeft: () => (
                <Button title="go to s2" onPress={() => {
                  navigation.setOptions({headerLeft: undefined})
                  navigation.navigate("screen-1")}}/>
              )
          })}/>
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

    • I've already tried leveraging the use of useEffect, useMemo, useCallback inside the screen-components, which did not help, as the Navigation is the issue here.

    • As can be seen, I tried to clear the headerLeft: parameter on the press of a button. Didn't prove to be effective

    • Also I tried replacing navigation.navigate(route) with navigation.replace(route), which wasn't successful

    • reactjs
    • react-native
    • navigation
    • react-navigation
    Share Improve this question asked Feb 17 at 15:23 BrightLightsBrightLights 33 bronze badges New contributor BrightLights is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
    Add a comment  | 

    2 Answers 2

    Reset to default 0

    I bet your mistake is simply that createStackNavigator() shall be apart from any component ;

    ...
import ScreenOne from "./src/screens/ScreenOne";
import ScreenTwo from "./src/screens/ScreenTwo";


const Stack = createStackNavigator();

export default function App() {
  return (
    <SafeAreaProvider>
...

    You might want to take look at the documentation.

    Otherwise, you may check out this similar question

    @Eternal Dreamer's Solution did solve a big fraction of the Issue. Additionally, I went over the Documentation of react-navigation/native at https://reactnavigation./ to learn how to effectively use the Stack Navigator. Summarized up I:

    1. Moved const Stack = createStackNavigator(); out of my React components like export default function App(){...}, as suggested
    2. Leveraged the use of navigation.goBack() and .popTo() as these functions discard loaded pages from the Stack, hence freeing memory
    3. Reducing the amount of nested Navigators in my project. Example: I only kept one for defining many settings-options routes, which only have to be loaded, when the main Settings screen is opened.
    4. Reduced the amount of const *name* = useNavigation() calls in different components like a custom-header and migrated to passing a navigation element to such elements via their definition. Example: export const *ExampleHeader* = ({ navigation }: { navigation: NativeStackNavigationProp<any> }) => { return *The Headers Options*

    In the end, the Application will always consume a bit of memory when rendering new components or a new page.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论