Белая вспышка после заставки на Android React Native - PullRequest
Новая
       33

Белая вспышка после заставки на Android React Native

1 голос
/ 23 апреля 2019

У меня есть приложение React Native, созданное с помощью ExpoKit SDK 32. У меня есть навигатор главного переключателя (из React Navigation), который начинается с экрана загрузки, там я делаю некоторую бизнес-логику, чтобы решить, какой экран должен загружаться следующим (экран A или Б), на следующем экране я отключаю заставку. Проблема в том, что всякий раз, когда я перехожу с экрана загрузки на экран A, у меня появляется белая вспышка. Мне не кажется, что это происходит на iOS, только на Android. Экран A имеет компонент imageBackground на весь экран. Изображение кэшируется и совпадает с заставкой.

Я пытался сделать изображение, равное SplashScreen, на фоне экрана загрузки. Тот же результат.

Затем я ставлю на свой компонент DidMount экрана A SplashScren.hide(). Тот же результат.

Лучший результат, если поместить SplashScreen.hide () в onLoadEnd моего фонового изображения экрана А.

Любая помощь приветствуется! Есть ли лучший способ справиться с такой ситуацией, связанной с компонентом коммутатора при быстрой навигации?

Вот так выглядит мой Экран А: 

async imageLoaded() {
    SplashScreen.hide();
    try {
      const usuario = await SecureStore.getItemAsync(LOGIN_USUARIO_LOCAL_AUTH);
      if (usuario) {
        await this.localAuth();
      }
    } catch (err) {
      // faz nada
    }
  }

....

 render() {
    const { usuario, senha } = this.state;
    const { logando, localAuthHardware } = this.props;

    const labelHardware = localAuthLabel(localAuthHardware);

    return (
      <SafeAreaView style={styles.safeArea}>
        <ImageBackground
          source={require('../../../assets/images/start.png')}
          resizeMode="cover"
          style={styles.container}
          imageStyle={styles.container}
          onLoadEnd={this.imageLoaded}
          fadeDuration={0}
        >
          <KeyboardAwareScrollView alwaysBounceVertical={false} keyboardShouldPersistTaps="handled">
            <Image
              source={require('../../../assets/images/baladapp-icone.png')}
              style={styles.baladappicone}
              resizeMode="contain"
              fadeDuration={0}
            />
            <View style={styles.baladappView}>
              <Image
                source={require('../../../assets/images/BaladAPP.png')}
                resizeMode="contain"
                style={styles.baladapp}
                fadeDuration={0}
              />
              <Text style={styles.produtorText}>PRODUTOR</Text>
            </View>
            <View style={styles.formView}>
              <TextInput
                placeholder="Usuário"
                style={[styles.input, { elevation: 1.3 }]}
                underlineColorAndroid="transparent"
                value={usuario}
                onChangeText={this.changeUsuario}
                keyboardType={Platform.OS === 'ios' ? 'email-address' : 'visible-password'}
                autoCorrect={false}
                autoCapitalize="none"
              />
              <PasswordInputField
                placeholder="Senha"
                style={styles.input}
                enablesReturnKeyAutomatically
                underlineColorAndroid="transparent"
                value={senha}
                onChangeText={this.changeSenha}
                containerStyle={[styles.containerPasswordStyle, { elevation: 1.3 }]}
                onSubmitEditing={this.login}
              />
              <TouchableOpacity
                onPress={this.abrirRecuperarSenha}
                style={styles.esqueceuTextView}
                hitSlop={hitSlop15}
              >
                <Text style={styles.esqueceuText}>Esqueceu a senha?</Text>
              </TouchableOpacity>
              <Button
                text="ACESSAR SISTEMA"
                containerStyle={styles.button}
                textStyle={styles.buttonText}
                onPress={this.login}
                loading={logando}
                loadingColor={colors.branco}
              />
              {localAuthHardware.length > 0 && (
                <TouchableOpacity
                  onPress={this.localAuth}
                  style={styles.localAuthView}
                  hitSlop={hitSlop15}
                >
                  <Text style={styles.esqueceuText}>{`Acessar com ${labelHardware}`}</Text>
                </TouchableOpacity>
              )}
            </View>
          </KeyboardAwareScrollView>
        </ImageBackground>
      </SafeAreaView>
    );
  }
...