Навигация становится все медленнее и медленнее - PullRequest
1 голос
/ 09 марта 2019

Когда я впервые запускаю приложение, оно быстро и быстро реагирует. Но когда я перемещаюсь, все медленнее и медленнее. Даже если я рекурсивно перемещаюсь между главным и вторым экранами. Первая навигация происходит мгновенно, но 10-е уже занимает секунду, и все приложение замедляется. У меня есть подозрение, что причиной является навигация. Потому что, если я ничего не делаю. приложение просто работает, это быстро, пока я не начну ориентироваться. Это происходит на Android с гораздо большим масштабом. На iOS (по крайней мере, на эмуляторе) проблема очень незначительна после многих переходов.

Насколько я понимаю, каждый раз, когда я куда-то перемещаюсь, новый экран добавляется поверх стека. Все мои навигации сделаны как this.props.navigation.navigate ('Домой'), иногда с реквизитом. Так что, возможно, в этом причина. Если это так, есть ли способ просто сбросить стек каждый раз, когда я возвращаюсь на домашний экран?

Это мой Navigator.js

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation'
import HomeScreen from '../screens/HomeScreen'
import ExercisesScreen from '../screens/ExercisesScreen'
import SettingsScreen from '../screens/SettingsScreen'
import IntakeScreen from '../screens/IntakeScreen'
import EmotionsScreen from '../screens/EmotionsScreen'
import MenuDrawer from './MenuDrawer';
import ProblemsScreen from '../screens/ProblemsScreen';
import PainScreen from '../screens/PainScreen';
import ActivityScreen from '../screens/ActivityScreen';
import ExerciseWalkingScreen from '../screens/ExerciseWalkingScreen'
import ExerciseStairsScreen from '../screens/ExerciseStairsScreen'
import ExerciseOrthostasisScreen from '../screens/ExerciseOrthostasisScreen';
import LoginScreen from '../screens/LoginScreen';
import ProfileScreen from '../screens/ProfileScreen';
import TimePickScreen from '../screens/TimePickScreen';

const { height, width } = Dimensions.get('window')

const DrawerConfig = {
    drawerWidth: width * 0.637,
    contentComponent: ({ navigation }) => {
        return (
            <MenuDrawer navigation={navigation} />
        )
    }
}

const DrawerNavigator = createDrawerNavigator({
    Home: {
        screen: HomeScreen
    },
    Exercises: {
        screen: ExercisesScreen
    },
    Settings: {
        screen: SettingsScreen
    },
    Intake: {
        screen: IntakeScreen
    },
    Emotions: {
        screen: EmotionsScreen
    },
    Problems: {
        screen: ProblemsScreen
    },
    Pain: {
        screen: PainScreen
    },
    Activity: {
        screen: ActivityScreen
    },
    WalkingExercise: {
        screen: ExerciseWalkingScreen
    },
    StairsExercise: {
        screen: ExerciseStairsScreen
    },
    OrthostasisExercise: {
        screen: ExerciseOrthostasisScreen
    },
    Profile: {
        screen: ProfileScreen
    },
    TimePickScreen: {
        screen: TimePickScreen
    }
}, DrawerConfig)

export default createAppContainer(DrawerNavigator)

У меня есть другой навигатор с одним экраном входа в систему, который показывает, что пользователь не вошел в систему. Но я не думаю, что это актуально.

Это содержимое моего HomeScreen.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Toolbar from '../components/Toolbar'
import ExercisesTile from '../components/tiles/ExercisesTile'
import ActivityItem from '../components/ActivityItem'
import IntakeTile from '../components/tiles/IntakeTile';
import EmotionsTile from '../components/tiles/EmotionsTile';
import ProblemsTile from '../components/tiles/ProblemsTile';
import PainTile from '../components/tiles/PainTile';
import ActivityTile from '../components/tiles/ActivityTile';

type Props = {};
export default class HomeScreen extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Toolbar text='Home' navigation={this.props.navigation} />
                <View style={styles.activityBox}>
                    <ExercisesTile navigation={this.props.navigation} />
                    <IntakeTile navigation={this.props.navigation} />
                    <EmotionsTile navigation={this.props.navigation} />
                    <ProblemsTile navigation={this.props.navigation} />
                    <PainTile navigation={this.props.navigation} />
                    <ActivityTile navigation={this.props.navigation} />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    activityBox: {
        marginTop: 10,
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: 'white',
        justifyContent: 'center'
    }
});

и просто для справки, Экран настроек, который просто полностью пуст

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Alert, AsyncStorage, Button } from 'react-native';
import Toolbar from '../components/Toolbar'

type Props = {};
export default class SettingsScreen extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Toolbar text='Settings' navigation={this.props.navigation} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

Навигация между этими двумя экранами назад и вперед становится все медленнее и медленнее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...