Question

我相信这是我所缺少的一些逻辑错误。我有一个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相邻。各种方法可以将加载消息写入到reducer，如果存在任何消息，则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();
    }
  }

reducer是触发实际消息的地方。我不会在此处粘贴它，因为LoadingIndicator内的log语句（以及reducer内的log语句）确认了reducers在正确的时间给出了正确的消息：

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仅显示在Switch的Main部分的顶部航海家。据我所知并非如此，因为LoadingIndicator与AppNavigator相邻，所以此时AppNavigator的构成是无关紧要的。对吧？

我想念什么？！？！？

叠加层未显示在React Native中

0 个答案: