3

アプリを初めて起動すると、すばやく反応します。しかし、私がナビゲートするとき、それはますます遅くなります。メイン画面とセカンド画面の間を再帰的に移動しても。最初のナビゲーションはすぐに完了しますが、10 番目のナビゲーションには既に 1 秒かかり、アプリ全体の速度が低下しています。ナビゲーションが原因ではないかと疑っています。何もしなければ。アプリが実行されているだけで、ナビゲートを開始するまでは高速です。これは、はるかに大規模な Android で発生します。iOS (少なくともエミュレーター) では、多くのナビゲーションの後、この問題はほんの少しだけ目立ちます。

私が理解している限り、どこかに移動するたびに、新しい画面がスタックの上に追加されます。私のすべてのナビゲーションは this.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)

ユーザーがサインインしていない場合に表示するログイン画面が 1 つある別のナビゲーターがありますが、関連性はないと思います。

これは私の 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,
    }
});

これら 2 つの画面間を行き来する操作は、毎回遅くなります。

4

0 に答える 0