Когда я впервые запускаю приложение, оно быстро и быстро реагирует. Но когда я перемещаюсь, все медленнее и медленнее. Даже если я рекурсивно перемещаюсь между главным и вторым экранами. Первая навигация происходит мгновенно, но 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,
}
});
Навигация между этими двумя экранами назад и вперед становится все медленнее и медленнее.