Question

我有一个用ExpoKit SDK 32构建的React Native App。我有一个主开关导航器（来自React Navigation），它以加载屏幕开始，在那里我做一些业务逻辑来决定下一步应该加载哪个屏幕（屏幕A或B），在下一个屏幕上，我禁用了启动屏幕。问题是：每当我从加载屏幕转到屏幕A时，都会出现白色闪烁。我似乎没有在iOS上发生这种情况，仅在Android上发生过。屏幕A在整个屏幕上都有一个imageBackground组件。图像已缓存，并且与启动屏幕相同。

我尝试在加载屏幕的背景上渲染与SplashScreen相等的图像。结果相同。

然后，将我放在屏幕A SplashScren.hide()的componentDidMount上。结果相同。

最好的结果是将“ SplashScreen.hide（）”放在屏幕A的背景图片的onLoadEnd上。

感谢您的帮助！有没有更好的方法来处理这种涉及React Navigation上的Switch组件的情况？

这是我的屏幕A现在的外观：

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>
    );
  }

在Android React Native上启动屏幕后出现白色闪烁

0 个答案: