Я считаю, что это какая-то логическая ошибка, которую мне не хватает.У меня есть компонент 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
не имеет значения. Правильно?
Чего мне не хватает?!?!?