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

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

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

它解决了我的抽屉滞后问题。

React-Navigation - DrawerNavigator性能问题

1 个答案: