3

当我第一次启动该应用程序时，它快速且响应迅速。但是当我导航时，它变得越来越慢。即使我递归地在主屏幕和第二屏幕之间导航。第一次导航是即时的，但第 10 次已经需要一秒钟，整个应用程序变得越来越慢。我怀疑导航是原因。因为如果我什么都不做。该应用程序刚刚运行，在我开始导航之前它很快。这发生在规模更大的android上。在 iOS 上（至少在模拟器上）这个问题在经过大量导航后才稍微明显。

据我了解，每次我导航到某个地方时，都会在堆栈顶部添加新屏幕。我所有的导航都是这样制作的。props.navigation.navigate('Home')，有时带有道具。所以也许这就是原因。如果是，有没有办法在我每次返回主屏幕时重置堆栈？

这是我的 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,
    }
});

在这两个屏幕之间来回导航每次都变得越来越慢。

4

0 回答 0