reactjs - 为什么 react 原生中标题图标加载缓慢？

Question

我同时使用堆栈导航和绘制导航。

"react-navigation": "3.0.4"

我的App.js

import React, { Component } from "react";
import HomeScreen from "./screen/HomeScreen";
export default class AwesomeApp extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }
  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("native-base/Fonts/Ionicons.ttf")
    });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return <HomeScreen />;
  }
}

我的主屏幕:

import React, { Component } from "react";
import TestScreen from "../TestScreen";
...
import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";
import { AsyncStorage } from "react-native";
import Expo, { Constants, LocalAuthentication } from "expo";
import TouchID from "react-native-touch-id";
import crypto from "crypto";
import safeCrypto from "react-native-fast-crypto";
import { asyncRandomBytes } from "react-native-secure-randombytes";
const defaultNavigationOptions = {
  headerTintColor: "black",
  headerStyle: {
    borderBottomColor: "#fff",
    borderBottomWidth: 1,
    shadowColor: "transparent",
    elevation: 0
  },
  headerTitleStyle: {
    fontWeight: "bold",
    fontSize: 18
  }
};

window.randomBytes = asyncRandomBytes;
window.scryptsy = safeCrypto.scrypt;

let pinnumbercheck = AsyncStorage.getItem("pinnumber");
let powersucesscheck = AsyncStorage.getItem("powersucess");
let nicknamecheck = AsyncStorage.getItem("nickname");
let compatible = Expo.LocalAuthentication.hasHardwareAsync();
let fingerprints = Expo.LocalAuthentication.isEnrolledAsync();

const Drawers = createDrawerNavigator(
  {
    FirstAgree: {
      screen: UserAcceptanceScreen
    },
    Test: { screen: TestScreen }
  },
  {
    initialRouteName: "FirstAgree",
    contentComponent: props => <SideBar {...props} />
  }
);

const SettingStack = createStackNavigator(
  {
    screen: SettingScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const FirstAgreeStack = createStackNavigator(
  {
    screen: UserAcceptanceScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const FirstAgreeStack2 = createStackNavigator(
  {
    screen: UserAcceptanceScreen2
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const WalletScreenStack = createStackNavigator(
  {
    screen: RegisterWalletScreen2
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const WalletScreen2Stack = createStackNavigator(
  {
    screen: RegisterWalletScreen3
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const TakeWalletStack = createStackNavigator(
  {
    screen: TakeWalletScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const RegisterSecurityStack = createStackNavigator(
  {
    screen: RegisterSecurityScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const RegisterSecurityStack2 = createStackNavigator(
  {
    screen: RegisterSecurityScreen2
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const PinNumberLoginStack = createStackNavigator(
  {
    screen: PinNumberLogin
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const TestssStack = createStackNavigator(
  {
    screen: Testss
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const NickRegisterStack = createStackNavigator(
  {
    screen: NickRegisterScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const stackScreen = createStackNavigator(
  {
    Drawers: {
      screen: Drawers
    },
    UserRight: {
      screen: UserRightScreen
    },
  ...(very more)
  },
  {
    initialRouteName: "RegisterWalletIndex",
    headerMode: "none"
  }
);

const HomeScreenRouter = createAppContainer(stackScreen);

export default HomeScreenRouter;

在屏幕之间移动以及如何使用它们没有任何问题。

但是，当您移动屏幕时，标题图标在下一个屏幕上显示得太晚。

标题图标晚于全屏显示。因此您无法立即在屏幕上进行操作。

usepage.js:

import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Alert,
  Image,
  Platform,
  ActivityIndicator
} from "react-native";
import { ListItem, CheckBox, Body } from "native-base";
import styles from "./styles.js";
import { Ionicons } from "@expo/vector-icons";
import { NavigationActions } from "react-navigation";

class UserAcceptanceScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allCheckbox: false,
      checkbox1: false,
      checkbox2: false,
      checkbox3: false,
      loading: false
    };
  }

  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <TouchableOpacity
          style={{ paddingLeft: 15 }}
          onPress={() => navigation.dispatch(NavigationActions.back())}
        >
          <Ionicons name={"ios-arrow-back"} size={35} color={"black"} />
        </TouchableOpacity>
      )
    };
  };

  componentDidMount() {
    this.setState({
      loading: true
    });
  }

  allToggleSwitch() {
    this.setState({
      allCheckbox: !this.state.allCheckbox
    });
  }


  toggleSwitch1() {
    this.setState({
      checkbox1: !this.state.checkbox1
    });
  }


  toggleSwitch2() {
    this.setState({
      checkbox2: !this.state.checkbox2
    });
  }


  toggleSwitch3() {
    this.setState({
      checkbox3: !this.state.checkbox3
    });
  }

  render() {
    return this.state.loading === false ? (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    ) : (
      <View style={styles.container}>
      ...
      </View>
    );
  }
}

export default UserAcceptanceScreen;

我不知道为什么，因为我做了我想做的事。我有什么遗漏的吗？

请给我们很多反馈和帮助。

Answer 1

我不知道为什么加载速度很慢，但我通过设计一个加载屏幕解决了这个问题。

我使用加载屏幕页面:

import React, { Component } from "react";
import {
  AsyncStorage,
  Text,
  View,
  ActivityIndicator,
  TouchableOpacity
} from "react-native";
import { Ionicons } from "@expo/vector-icons";

class StartScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }

  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <TouchableOpacity
          style={{ paddingLeft: 15 }}
          onPress={() => navigation.navigate("FirstAgreeStack")}
        >
          <Ionicons name={"ios-arrow-back"} size={35} color={"#ffffff"} />
        </TouchableOpacity>
      ),

      headerRight: null
    };
  };

  async componentWillMount() {
    let powersucess = await AsyncStorage.getItem("powersucess");
    let keystoredata = await AsyncStorage.getItem("keystoredata");
    let nickname = await AsyncStorage.getItem("nickname");
    let pinnumber = await AsyncStorage.getItem("pinnumber");
    let useTouchId = await AsyncStorage.getItem("useTouchId");
    powersucess === null
      ? this.props.navigation.navigate("CusterMizingAlert")
      : keystoredata === null
      ? this.props.navigation.navigate("RegisterWalletIndex")
      : nickname === null
      ? this.props.navigation.navigate("RegisterWalletIndex")
      : pinnumber === null
      ? this.props.navigation.navigate("RegisterSecurity")
      : pinnumber === null
      ? this.props.navigation.navigate("RealPinNumberLogin")
      : useTouchId === "useTouchId"
      ? this.props.navigation.navigate("TouchIdLogin")
      : this.props.navigation.navigate("FaceIdLogin"),
      this.setState({ isReady: true });
  }
  render() {
    return this.state.isReady === false ? (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    ) : (
      <View>
        <Text>dfdff</Text>
      </View>
    );
  }
}
export default StartScreen;