React-Navigation - DrawerNavigator 性能问题答案

【问题标题】：React-Navigation - DrawerNavigator Performance issueReact-Navigation - DrawerNavigator 性能问题
【发布时间】：2018-01-20 23:46:33
【问题描述】：

我在使用以下代码时遇到了 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 上正常工作。我想我错过了一些东西，但我不知道是什么。如果我必须在组件中放置一些逻辑，我应该将逻辑代码放在哪里？如果有人想启发我:)

【问题讨论】：

在模拟器中是否卡顿？您是否在实际设备上进行过测试？
在真正的 Android 设备上滞后，但在 iOS 上则不然。我有 JS 开发模式和调试远程 js 关闭...
你试过InteractionManager吗？也许尝试更改您的代码如下：componentDidMount(){ InteractionManager.runAfterInteractions(() => { // your logic here }); }
我尝试使用 InteractionManager，但它以同样的方式滞后，FPS JS 下降到 -2.1...只要我在 componentDidMount() 添加一些逻辑，它就开始滞后......

标签： android performance react-native react-navigation

【解决方案1】：

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

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

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

【讨论】：