Заставка должна быть инициализирована перед отображением начального экрана - PullRequest
Новая
       6

Заставка должна быть инициализирована перед отображением начального экрана

0 голосов
/ 25 марта 2019

... Я пытаюсь удалить навигацию по ящикам и использовать нижнюю навигацию, но не могу отобразить заставку, а затем домашний экран. Пожалуйста, помогите мне, так как я новичок в React Native ...

... навигационный код ... 

import React from "react";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from "react-navigation";
import DoctorHome from "../containers/Home/DoctorHome/DoctorHome";
import Appointments from "../containers/DoctorFlow/Appointments/Appointments";
import EditProfile from "../containers/DoctorFlow/EditProfile/EditProfile";
import ViewClinic from "../containers/DoctorFlow/ViewClinic/ViewClinic";
import AddClinic from "../containers/DoctorFlow/AddClinic/AddClinic";
import Profile from "../containers/DoctorFlow/Profile/Profile";
import Proffession from "../containers/DoctorFlow/Profile/Proffession";
import {
  View,
  Image,
  Touchable,
  TouchableHighlight,
  TouchableNativeFeedback,
  Platform
} from "react-native";
  const HomeStack = createStackNavigator ({
    Home: DoctorHome,
    Appointments: Appointments,
    EditProfile: EditProfile
  });
  const ClinicStack = createStackNavigator ({
    Clinic: ViewClinic,
    AddClinic: AddClinic
  });
  const ProfileStack = createStackNavigator ({
    Profile: Profile,
    EditProfile: EditProfile,
    Proffession: Proffession
  });

  const MainNavigator = createBottomTabNavigator({
    Home: HomeStack,
    Clinic: ClinicStack,
    Profile: ProfileStack
});
export const AppNavigator = createAppContainer(MainNavigator);

... код заставки ... 

import React, { Component } from "react";
import { AsyncStorage, Image, StyleSheet, Text, View } from "react-native";

import { connect } from "react-redux";
import TimerMixin from "react-timer-mixin";
import { StackActions, NavigationActions } from "react-navigation";
class Splash extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }
  componentWillMount() {}

  componentDidMount() {
    this.getUser();
    TimerMixin.setTimeout(() => {
      if (this.state.user) {
        console.log(this.state.user.user.userType);
        if (this.state.user.user.userType == "DOCTOR") {
          if (this.state.user.user.isProfileCompleted == false) {
            this.props.navigation.dispatch(
              StackActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: "EditDoctorProfile" })
                ]
              })
            );
          } else {
            this.props.navigation.dispatch(
              StackActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: "DoctorHomeMenu" })
                ]
              })
            );
          }
        }
      } else {
        this.props.navigation.dispatch(
          StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: "Login" })]
          })
        );
      }
    }, 1000);
  }

  async getUser() {
    await AsyncStorage.getItem("user").then(user =>
      this.setState({ user: JSON.parse(user) })
    );
  }
  render() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
          flex: 1,
          backgroundColor: "#fff"
        }}
      >
        <Image
          style={{ width: 200, height: 40 }}
          source={require("../Images/logo/logo.png")}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
    padding: 16
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

const mapDispatchToProps = dispatch => ({
  Login: () =>
    dispatch(
      NavigationActions.navigate({
        routeName: "Login"
      })
    )
});

export default connect(
  null,
  mapDispatchToProps
)(Splash);

... App.js (точка входа) ... 

import React from "react";
import { View, StatusBar } from "react-native";
import { Provider } from "react-redux";
import { AppNavigator } from "../Navigation/RootNavigation";
import configureStore from "../store/ConfigureStore";
import color from "../ui/color";
const store = configureStore();
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: color.primary
        }}
      >
        <StatusBar
          backgroundColor={"#000"}
          barStyle="light-content"
          hidden={false}
        />
        <Provider store={store}>
          <AppNavigator />
        </Provider>
      </View>
    );
  }
}

... Сначала я хочу отобразить логотип, а затем я хочу экран входа / регистрации. Как только пользователь войдет в систему, он сможет получить доступ к домашнему и внутреннему экранам. Но прямо сейчас я получаю Начальный экран в качестве моего начального экрана. Пожалуйста, помогите мне решить эту проблему. ...

1 Ответ

0 голосов
/ 25 марта 2019

Возможно, вы захотите сделать стек входа маршрутом по умолчанию: 

const MainNavigator = createBottomTabNavigator({
    Home: HomeStack,
    Clinic: ClinicStack,
    Profile: ProfileStack,
    Login: LoginStack
}, {initialRouteName: 'Login'});

Возможно, вы также захотите добавить заставку, чтобы сделать его маршрутом по умолчанию 

 const LoginStack = createStackNavigator ({
    Login: Login,
    SignUp: SignUp,
    Splash: Splash
  }, {initialRouteName: 'Splash')
...