React-Navigation - DrawerNavigator 性能問題

Question

我在使用以下代碼時遇到了 DrawerNavigator 的性能問題。

class App extends Component {

  componentDidMount(){
    var salt = bcrypt.genSaltSync(10);
    var hash = bcrypt.hashSync("StrToHash", salt);
  }


  render() {
    console.log("rendering");
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Button
          onPress={ () => {} }
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

Home.navigationOptions = {
  drawerLabel: 'Home',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons
      name="move-to-inbox"
      size={24}
      style={{ color: tintColor }}
    />
  ),
};

App.navigationOptions = {
  drawerLabel: 'App',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
  ),
};


export default DrawerExample = DrawerNavigator(
  {
    Home: {
      path: '/',
      screen: Home,
    },
    App: {
      path: '/sent',
      screen: App,
    },
  },
  {
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    initialRouteName: 'Home',
    contentOptions: {
      activeTintColor: '#e91e63',
    },
  }
);

我不明白為什么，每次我在 componentDidMount() DrawerNavigator 中放入一些邏輯時，它都會變得滯后並且在 Android 上無法正常工作。 我想我錯過了一些東西，但我不知道是什么。 如果我必須在組件中放置一些邏輯，我應該將邏輯代碼放在哪里？ 如果有人想啟發我:)

Answer 1

在<Drawer.Navigator>使用 prop detachInactiveScreens={false}但你也需要

import { enableScreens } from 'react-native-screens'

它解決了我的抽屜滯后問題。