Наложение не отображается в React Native - PullRequest
0 голосов
/ 29 июня 2019

Я считаю, что это какая-то логическая ошибка, которую мне не хватает.У меня есть компонент LoadingIndicator, который берет message от своего родителя и использует наличие сообщения, чтобы определить, отображать ли:

// @flow
import React from "react";
import { Text, View } from "react-native";
import { Overlay } from "react-native-elements";
import { DotIndicator } from "react-native-indicators";

type Props = { isVisible?: boolean, message: string };

const LoadingIndicator = ({ isVisible, message }: Props) => {
  console.log("message:", message);

  return (
    <Overlay
      containerStyle={styles.modal}
      height={200}
      isVisible={!!message}
      style={styles.modal}
      borderRadius={20}
      overlayBackgroundColor={"lightblue"}
    >
      <View style={styles.modalContainer}>
        <DotIndicator color={"darkgrey"} />
        <Text>{message}</Text>
      </View>
    </Overlay>
  );
};

export default LoadingIndicator;

LoadingIndicator расположен рядом с основным AppNavigator по моему AppContainer.Различные методы могут записать сообщение о загрузке в редуктор, и если присутствует какое-либо сообщение, LoadingIndicator должно показать:

//...other definitions of navigators and stacks etc.

const SwitchNavigator = createSwitchNavigator({
  Auth: AuthNavigator,
  Main: TabNavigator
});

const AppNavigator = createAppContainer(SwitchNavigator);

type Props = {
  navigation: Object,
  getLocationAsync: () => void,
  loadingMessage: string
};

class AppContainer extends Component<Props> {
  static router = TabNavigator.router;

  render() {
    return (
      <View style={{ flex: 1 }}>
        <LoadingIndicator message={this.props.loadingMessage} />
        <AppNavigator navigation={this.props.navigation} />
      </View>
    );
  }
}

export default connect(
  ({ location, deals, auth }) => ({
    loadingMessage:
      auth.loadingMessage || location.loadingMessage || deals.loadingMessage
  }),
  { getLocationAsync }
)(AppContainer);

Не уверен, что это важно, но вот AuthNavigator:

const AuthStack = createSwitchNavigator({ Login: LoginScreen });

export class AuthNavigator extends Component {
  static router = AuthStack.router;

  async componentDidMount() {
    const user = await AsyncStorage.getItem("trago_logged_in_user");
    if (user) {
      // console.log("User found in storage:", user);
      this.props.setUser(JSON.parse(user));
      this.props.navigation.navigate("Main");
    }
  }

  render() {
    return <AuthStack navigation={this.props.navigation} />;
  }
}

const mapStateToProps = state => {
  return { user: state.auth.user };
};

export default connect(
  mapStateToProps,
  { setUser }
)(AuthNavigator);

И здесь вызываются методы, которые активируют индикатор, с LoginScreen

async componentWillReceiveProps(newProps: Object) {
    if (newProps.user) {
        this.props.navigation.navigate("Main");
        this.props.getLocationAsync();
    }
  }

Редуктор - это то, где срабатывают фактические сообщения.Я не буду вставлять это сюда, потому что оператор log внутри LoadingIndicator (вместе с оператором log внутри редуктора) подтверждает, что редукторы дают правильные сообщения в нужное время:

message: 
LOGIN_START
message: Logging in...
LOGIN_SUCCESS
message: 
USER_LOCATION_START
message: Getting Location...
USER_LOCATION_SUCCESS
message: 

Извинитеэто заняло так много времени, но вот проблема:

LoadingIndicator отображается только для «Получение местоположения ...», а не для «Вход в систему ...».

Я также попробовал путь регистрации, но индикатор все еще не отображается.Входя в систему и регистрируя работу, они просто не показывают индикатор загрузки.

Я не могу понять, что я делаю неправильно!Возможные виновники:

  • Различные редукторы (authReducer и locationReducer работают по-разному, но правильный message всегда попадает в индикаторы.

  • Это как-то связано с настройкой моего AppContainer / AppNavigator, так что LoadingIndicator отображается только в верхней части Main части Switch Navigator.Насколько я могу судить, этого не должно быть, поскольку LoadingIndicator смежен с AppNavigator, поэтому в этот момент состав AppNavigator не имеет значения. Правильно?

Чего мне не хватает?!?!?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...