typescript - React Navigation：后退按钮执行速度非常慢

Question

沙盒应用程序，包含两个带有 React Native Stack navigator 的屏幕。

当使用按钮显式调用'navigation.navigate("Desired Screen")'时，应用程序表现得很好。但是，当尝试使用后退按钮（离开 initialRoute 屏幕时在标题上自动创建）时，屏幕加载大约需要 2 秒。

在打开“调试”和未打开调试的真实 Android 设备上进行了测试。这是反应原生导航的预期行为吗？

应用程序.tsx：

import React from 'react';
import {Text, View} from 'react-native';
import {Home} from './src/screens/fornav/Home';
import {MySettings} from './src/screens/fornav/MySettings';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  MySettings: undefined;
};
const MyStack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <MyStack.Navigator initialRouteName="Home">
        <MyStack.Screen
          name="Home"
          component={Home}
          options={{title: 'My Home Screen'}}
        />

        <MyStack.Screen name="MySettings" component={MySettings} />
      </MyStack.Navigator>
    </NavigationContainer>
  );
};

export default App;

主页.tsx：

import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

interface HomeProps {
  navigation: any;
}

export const Home: React.FC<HomeProps> = ({navigation}) => {
  return (
    <View style={styles.viewStyle}>
      <Text>{'HOME SCREEN'}</Text>
      <Button
        title={'Go to settings.'}
        onPress={() => navigation.navigate('MySettings')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  viewStyle: {},
});

我的设置.tsx：

import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

interface MySettingsProps {
  navigation: any;
}
export const MySettings: React.FC<MySettingsProps> = ({navigation}) => {
  return (
    <View style={styles.viewStyle}>
      <Text>{'SETTINGS SCREEN'}</Text>
      <Button title={'Go home.'} onPress={() => navigation.navigate('Home')} />
    </View>
  );
};

const styles = StyleSheet.create({
  viewStyle: {},
});

标签： typescriptreact-nativereact-native-navigation