NavigationService 减慢了 react-native 生产

Question

我已经实现了 react-navigation 提供的 NavigationService，它导致生产应用程序加载速度慢了 10 倍。

我用它和不用它都做了apk。

有它的一个在 15+ 秒内启动，另一个在 1-2 秒内启动。

其他人遇到过这种问题吗？

这是我在导航器和导航服务中使用的代码：

RootNavigator.js：

import React, { Component } from "react";
import {
  createStackNavigator,
  HeaderBackButton,
  createAppContainer
} from "react-navigation";

import { colors } from "assets/styles/colors";

import RegistrationInputScreen from "components/Registration/Input";
import RegistrationVerificationScreen from "components/Registration/Verification";
import MainScreen from "screens/MainScreen";
import Conversation from "components/Messages/Conversation";
import Private from "components/FirstTime/Private";
import Description from "components/FirstTime/Description";
import CategoriesScreen from "components/FirstTime/CategoriesScreen";
import Professional from "components/FirstTime/Professional";
import Home from "components/Home";
import SecretScreen from "screens/SecretScreen";
import Map from "components/Map/Map";
import ProfileScreen from "components/Profile/Profile";
import EditProfile from "components/Profile/EditProfile";
import PublicProfile from "components/Profile/PublicProfile";
import Settings from "components/Profile/Settings";
import RegisteredScreen from "components/Partials/Registered";
import NavigationService from "navigation/NavigationService";

export default class RootNavigator extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    console.log("PROPS", this.props);
  }

  render() {
    let sp = this.props.screenProps;
    return (
      <Navigator
        // ref={navigatorRef => {
        //   NavigationService.setTopLevelNavigator(navigatorRef);
        // }}
        screenProps={{
          getDeviceToken: sp.getDeviceToken
        }}
      />
    );
  }
}

export const RootNav = createStackNavigator({
  RegistrationOptions: {
    screen: Home,
    navigationOptions: {
      header: null
    }
  },
  RegistrationInput: {
    screen: RegistrationInputScreen,
    navigationOptions: config => setHeader(null, config)
  },
  RegistrationVerification: {
    screen: RegistrationVerificationScreen,
    navigationOptions: config => setHeader("Registration Verification", config)
  },
  Map: {
    screen: Map,
    navigationOptions: {
      header: null
    }
  },
  MainScreen: MainScreen,
  Registered: {
    screen: RegisteredScreen,
    navigationOptions: {
      header: null
    }
  },
  Private: {
    screen: Private,
    navigationOptions: config => setHeader("Introduce yourself", config)
  },
  Interests: {
    screen: CategoriesScreen,
    navigationOptions: config => setHeader("Back", config)
  },
  Description: {
    screen: Description,
    navigationOptions: config => setHeader("Describe yourself", config)
  },
  Professional: {
    screen: Professional,
    navigationOptions: config => setHeader("Professional", config)
  },
  Conversation: {
    screen: Conversation,
    navigationOptions: config => setHeader(null, config)
  },
  Secret: {
    screen: SecretScreen,
    navigationOptions: config => setHeader("Configure app", config)
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: config => setHeader("Profile", config)
  },
  Public: {
    screen: PublicProfile,
    navigationOptions: config => setHeader("Profile", config)
  },
  EditProfile: {
    screen: EditProfile,
    navigationOptions: config => setHeader("Edit profile", config)
  },
  Settings: {
    screen: Settings,
    navigationOptions: config => setHeader("Settings", config)
  }
});

export const Navigator = createAppContainer(RootNav);

const setHeader = (title = null, config) => {
  let options = {
    title: title,
    headerStyle: {
      backgroundColor: colors.bgRed,
      shadowOpacity: 0,
      shadowOffset: {
        height: 0
      },
      shadowRadius: 0,
      elevation: 0
    },
    headerTitleStyle: { color: colors.white },
    headerTransitionPreset: { headerMode: "screen" },
    cardShadowEnabled: false,
    headerLeft: (
      <HeaderBackButton
        tintColor={colors.white}
        onPress={() => config.navigation.dispatch({ type: "Navigation/BACK" })}
      />
    ),
    ...config.navigationOptions
  };

  if (title === null) delete options.title;

  return options;
};

NavigationService.js：

import { NavigationActions } from 'react-navigation';

let _navigator;

const setTopLevelNavigator = (navigatorRef) => {
    console.log("WILL SET TOP LEVEL NAVIGATOR WITH", navigatorRef);
    _navigator = navigatorRef;
}

const navigate = (routeName, params) => {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params
        })
    )
}

export default{
    navigate,
    setTopLevelNavigator
}

Answer 1

如果其他人对此感到困惑，我通过删除 setTopLevelNavigator 中的 console.log 解决了这个问题。