Почему значок заголовка медленно загружается в реагирующем? - PullRequest
Новая
       16

Почему значок заголовка медленно загружается в реагирующем?

0 голосов
/ 16 мая 2019

Я использую и навигацию по стеку, и навигацию по рисованию одновременно.

«реакция-навигация»: «3.0.4»

My 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;

В перемещениях между экранами и их использовании нет ничего плохого.

Однако значок заголовка отображается слишком поздно на следующем экране при его перемещении.

Значок заголовка отображается позже, чем во весь экран. Таким образом, вы не можете действовать на экране сразу.

image

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;

Я не знаю почему, потому что я сделал то, что хотел. Я что-то упускаю?

Пожалуйста, дайте нам много отзывов и помощи.

1 Ответ

0 голосов
/ 17 мая 2019

Я не знал, почему он загружался медленно, но решил эту проблему, спроектировав один загрузочный экран.

Моя страница загрузки экрана: 

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;
...