在 React-native 或 Expo eject 中移动屏幕时如何删除闪屏？

Question

我的应用是 Expo 上的独立应用，使用 expo eject。

我的问题是，当移动屏幕时，我能看到启动画面的时间很短，并且屏幕已渲染。是什么原因，怎样才能让闪屏不亮？

我想摆脱这个问题，因为它对 UI 的影响很大。

App.js

import React, { Component } from "react";
import HomeScreen from "./screen/HomeScreen";
import { Text, Image, View, Platform } from "react-native";
import { Asset, AppLoading, SplashScreen } from "expo";
export default class AwesomeApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      areReasourcesReady: false
    };
  }

  async componentDidMount() {
    SplashScreen.hide();
    this.cacheResourcesAsync() // ask for resources
      .then(() => this.setState({ areReasourcesReady: true })) // mark reasources as loaded
      .catch(error =>
        console.error(`Unexpected error thrown when loading:
    ${error.stack}`)
      );
    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")
    });
  }

  async cacheResourcesAsync() {
    const images = [require("./image/testimage.png")];
    const cacheImages = images.map(image =>
      Asset.fromModule(image).downloadAsync()
    );
    return Promise.all(cacheImages);
  }

  render() {
    if (!this.state.areReasourcesReady) {
      return Platform.OS !== "ios" ? (
        <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        />
      ) : (
        <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
          <Image
            source={require("./image/logo_name_01.png")}
            resizeMode="contain"
            onLoad={this.cacheResourcesAsync}
          />
        </View>
      );
    }
    return <HomeScreen />;
  }
}

HomeScreen.js

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

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

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

const HomeScreenRouter = createAppContainer(stackScreen);

export default HomeScreenRouter;

StartScreen.js

import React, { Component } from "react";
import {
  AsyncStorage,
  Text,
  View,
  ActivityIndicator,
  Image
} from "react-native";
import { Permissions } from "expo";

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

  async componentDidMount() {
    let powersucess = await AsyncStorage.getItem("powersucess");
    if (powersucess !== null) {
      const permission = await Permissions.getAsync(Permissions.CAMERA_ROLL);
      if (permission.status !== "granted") {
        const newPermission = await Permissions.askAsync(
          Permissions.CAMERA_ROLL
        );
        console.log("---" + newPermission);
        if (newPermission.status === "granted") {
          console.log("동의함 첫번째");
          console.log(newPermission.status);
        } else {
        }
      } else {
        console.log("동의함 첫번째");
      }
    }
  }

  async componentWillMount() {
    let version = this.state.text;
    let powersucess = await AsyncStorage.getItem("powersucess");
    let useTouchId = await AsyncStorage.getItem("useTouchId");
    let RealPinNumber = await AsyncStorage.getItem("RealPinNumberLogin");

    if (version !== "1000") {
      this.props.navigation.navigate("Test");
    } else {
      if (powersucess === null) {
        this.props.navigation.navigate("CusterMizingAlert");
      } else {
        if (RealPinNumber === null && useTouchId === null) {
          this.props.navigation.navigate("RegisterWalletIndex");
        } else {
          if (useTouchId === null) {
            this.props.navigation.navigate("RealPinNumberLogin");
          } else {
            if (useTouchId === "useTouchId") {
              this.props.navigation.navigate("TouchIdLogin");
            } else {
              this.props.navigation.navigate("FaceIdLogin");
            }
          }
        }
      }
    }

    this.setState({ isReady: true });
  }
  render() {
    return this.state.isReady === false ? (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Image
          style={{ width: 180, height: 180 }}
          source={require("../../image/logo_name_01.png")}
          resizeMode="contain"
        />
        <View
          style={{
            flexDirection: "column",
            position: "absolute",
            bottom: "30%"
          }}
        >
          <ActivityIndicator size="small" color="#ffd90d" />
        </View>
      </View>
    ) : (
      <View>
        <Text style={{ color: "#ffffff" }}>{this.state.text}</Text>
      </View>
    );
  }
}
export default StartScreen;

点击移动屏幕按钮的屏幕：

import React from "react";
import {
  View,
  Text,
  Dimensions,
  ActivityIndicator,
  AsyncStorage,
  Alert,
  Image,
  Platform,
  NativeModules,
  Modal,
  TextInput,
  BackHandler,
  SafeAreaView,
  TouchableHighlight
} from "react-native";
import "../../global";
import PinView from "react-native-pin-view";
import styles from "./styles.js";
import Wallet from "../../components/wallet";
import { V3_OPTIONS } from "../../components/walletapi";
import {
  backHandlerAdd,
  BackHandlerRemove,
  setDisable,
  setColor
} from "../../util/gbrick";

const windowHeight = Dimensions.get("window").height;
const windowWidth = Dimensions.get("window").width;
const { RNExitApp } = NativeModules;

class RealPinNumberLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      numbering: "",
      alertVisibility: false,
      password: "",
      keystoredata: ""
    };
  }

  componentWillMount() {
    backHandlerAdd();
  }

  componentWillUnmount() {
    BackHandlerRemove();
  }

  async componentDidMount() {
    await AsyncStorage.setItem("RealPinNumberLogin", "RealPinNumberLogin");
    let pinnum = await AsyncStorage.getItem("pinnumber");
    let publicaddress = await AsyncStorage.getItem("publicaddress");
          let registerdata = {
            user_address: publicaddress,
          };
          let data = JSON.stringify(registerdata);
          this.setState({
            numbering: pinnum,
            data: data,
          });

          console.log(data);
  }

  //핀번호 일치여부 확인하는 함수.
  onFinishCheckingCode(number, clear) {
    console.log(number);
    if (this.state.numbering !== number) {
      clear();
    }
    if (this.state.numbering === number) {
      BackHandlerRemove();
      this.props.navigation.push("WebView", {
        data: this.state.data
      });
    }
  }

  showCustomAlert(visible) {
    this.setState({ alertVisibility: visible });
  }

  async check() {
    try {
      wallet = await Wallet.fromV3(
        JSON.parse(this.state.keystoredata),
        this.state.password,
        V3_OPTIONS
      );
      this.setState({
        alertVisibility: false
      });
      setDisable();
      setColor("#ffffff");
      this.props.navigation.push("RegisterSecurity", {
        data: this.state.data
      });
    } catch (error) {
      this.setState({
        disabled: false
      });
      alert(error);
    }
  }

  render() {
    return this.state.numbering === "" ? (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Image
          style={{ width: 180, height: 180 }}
          source={require("../../image/logo_name_01.png")}
          resizeMode="contain"
        />
        <View
          style={{
            flexDirection: "column",
            position: "absolute",
            bottom: "30%"
          }}
        >
          <ActivityIndicator size="small" color="#ffd90d" />
        </View>
      </View>
    ) : (
      <SafeAreaView style={styles.container}>

        <View style={styles.realpinloginlayout1}>
          <View style={{ paddingBottom: Platform.OS === "ios" ? "5%" : "10%" }}>
            <Image
              style={{
                resizeMode: "contain"
              }}
              source={require("../../image/realloginpin.png")}
            />
          </View>
          <PinView
            onComplete={this.onFinishCheckingCode.bind(this)}
            pinLength={4}
            inputBgColor="#888888"
            inputActiveBgColor="#ffd90d"
            buttonBgColor="#ffffff"
            buttonTextColor="black"
            keyboardViewStyle={{
              borderColor: "#dfdfdf",
              borderWidth: 1,
              width: windowHeight / 11,
              height: windowHeight / 11
            }}
            inputViewStyle={{ width: 18, height: 18, margin: 18 }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

export default RealPinNumberLogin;

this.props.navigation.push("WebView", {
    data: this.state.data
  });

这就是初始屏幕出现的地方。

Click this to see the problem screen.

请多多帮助

提前致谢

Answer 1

我通过删除 Android 设置的默认启动画面解决了这个问题。

splash_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/splashBackground"/>

    <!--<item><bitmap android:gravity="center" android:src="@drawable/logo_name_01" /></item>-->

</layer-list>

在 React-native 或 Expo eject 中移动屏幕时如何删除闪屏？

How do I remove the splash screen when I move the screen in React-native or Expo eject?

splash-screen

react-native

react-navigation

expo